在加载脚本之前等待显示Div

时间：2015-09-21 05:04:41

标签： jquery html css

我试图让它一旦图片淡出，它将被替换为script.js文件。我目前有以下代码：

＆＃13;
＆＃13; 
<!DOCTYPE html>
<html>
<head>
	<title>Timothy Lampen</title>
</head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>


<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">

<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">

<link rel="stylesheet" type="text/css" href="styles.css">

<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>



<body>
	<script>
		$(document).ready(function() {
			$(".circle")
			.delay(3000)
			.fadeOut(1000, function () {
				$(this)
				.addClass("content")
				.removeClass("circle")
				.empty()
				.append($("<script/>", {
					src: "script.js",
					type: "text/javascript"
				}));
			});
		});
	</script>
	<nav class="navbar navbar-default">
		<div class="container-fluid">

			<div class="navbar-header">
				<a class="navbar-brand" href="#">Brand</a>
			</div>
			<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
				<ul class="nav navbar-nav">
					<li class="active"><a href="#">Home</a></li>
					<li><a href="#">Academics</a></li>
					<li><a href="#">Sports</a></li>
					<li><a href="#">HTML</a></li>
					<li><a href="#">Java</a></li>
				</ul>
			</div>

		</div>
	</nav>







	<div id="myCarousel" class="carousel slide carousel-spacing" data-ride="carousel">
		<div class="carousel-indicators">
			<ol class="carousel-indicators">
				<li data-target="#myCarousel" data-slide-to="0"></li>
				<li data-target="#myCarousel" data-slide-to="1"></li>
				<li data-target="#myCarousel" data-slide-to="2"></li>
				<li data-target="#myCarousel" data-slide-to="3"></li>
			</ol>
		</div>

		<div class="carousel-inner" role="listbox">
			<div class="item active">
				<img src="Desert.jpg" alt="Pic1">
			</div>
			<div class="item">
				<img src="Desert.jpg" alt="Pic2">
			</div>
			<div class="item">
				<img src="Desert.jpg" alt="Pic3">
			</div>
			<div class="item">
				<img src="Desert.jpg" alt="Pic4">
			</div>
		</div>

		<a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
			<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
			<span class="sr-only">Previous</span>
		</a>
		<a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
			<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
			<span class="sr-only">Next</span>
		</a>
	</div>
	<div class="circle">
		<div id="graph">
			<div></div>
			<div></div>
			<div></div>
			<div></div>
			<div></div>
			<div></div>
			<div></div>
			<div></div>
		</div>
	</div>
	
</body>
</html>
＆＃13;
＆＃13;
＆＃13;

但这种情况正在发生：https://gyazo.com/227b212e9822fbf492999d3c6a82909a

如您所见，图片正在加载，但它没有被script.js文件替换。

那么我怎样才能延迟加载script.js文件，以便在div的类被切换到＆＃39; content＆＃39;

之后加载它

谢谢， 添

2 个答案:

答案 0 :(得分：1)

首先：将脚本标签放在体内 第二步：如果您想延迟其负载，请删除带有script.js来源的脚本代码 在以下情况下尝试：

$(document).ready(function() {
    $(".circle")
        .delay(3000)
        .fadeOut(1000, function () {
            $(this)
                .addClass("content")
                .removeClass("circle")
                .empty()
                .append($("<script/>", {
                    src: "script.js",
                    type: "text/javascript"
                }));
        });
    });
});

答案 1 :(得分：0)

加载时隐藏Carousel：

.carousel {
  display: none;
 }

我已经添加了更改横幅changeAd并延迟调用它的功能：

function changeAd() { 
  $(".circle").fadeOut(1000).delay(1000)
    .addClass(".content").removeClass(".circle");
  $(".carousel").delay(1000).fadeIn(1000);
}
setTimeout(changeAd, 3000);

请参阅下面的代码：

＆＃13;
＆＃13; 
var skills = [
  {"header" : "INTERESTS",
    "captions" : [
      "Cooking",
      "Web",
      "Mobile",
      "Design",
      "AI"
    ],
    "values" : [
      0.70,
      0.90,
      0.70,
      0.80,
      0.70
    ]
  },
  {"header" : "LANGUAGES",
    "captions" : [
      "nodeJS",
      "PHP",
      "JS",
      "Ruby",
      "Java"
    ],
    "values" : [
      0.80,
      0.85,
      0.90,
      0.70,
      0.90
    ]
  },
  {"header" : "MISC",
    "captions" : [
      "Eclipse",
      "Git",
      "Rails",
      "OpenGL",
      "Linux"
    ],
    "values" : [
      0.85,
      0.85,
      0.75,
      0.60,
      0.80
    ]
  }
];

var pentagonIndex = 0;
var valueIndex = 0;
var width = 0;
var height = 0;
var radOffset = Math.PI/2
var sides = 5; // Number of sides in the polygon
var theta = 2 * Math.PI/sides; // radians per section

function getXY(i, radius) {
  return {"x": Math.cos(radOffset +theta * i) * radius*width + width/2,
    "y": Math.sin(radOffset +theta * i) * radius*height + height/2};
}

var hue = [];
var hueOffset = 25;

for (var s in skills) {
  $(".content").append('<div class="pentagon" id="interests"><div class="header"></div><canvas class="pentCanvas"/></div>');
  hue[s] = (hueOffset + s * 255/skills.length) % 255;
}

$(".pentagon").each(function(index){
  width = $(this).width();
  height = $(this).height();
  var ctx = $(this).find('canvas')[0].getContext('2d');
  ctx.canvas.width = width;
  ctx.canvas.height = height;
  ctx.font="15px Monospace";
  ctx.textAlign="center";
  
  /*** LABEL ***/
  color = "hsl("+hue[pentagonIndex]+", 100%, 50%)";
  ctx.fillStyle = color;
  ctx.fillText(skills[pentagonIndex].header, width/2, 15);

  ctx.font="13px Monospace";   

  /*** PENTAGON BACKGROUND ***/
  for (var i = 0; i < sides; i++) {
    // For each side, draw two segments: the side, and the radius
    ctx.beginPath();
    xy = getXY(i, 0.3);
    colorJitter = 25 + theta*i*2;
    color = "hsl("+hue[pentagonIndex]+",100%," + colorJitter + "%)";
    ctx.fillStyle = color;
    ctx.strokeStyle = color;
    ctx.moveTo(0.5*width, 0.5*height); //center
    ctx.lineTo(xy.x, xy.y);
    xy = getXY(i+1, 0.3);
    ctx.lineTo(xy.x, xy.y);
    xy = getXY(i, 0.37);
    console.log();
    ctx.fillText(skills[ pentagonIndex].captions[valueIndex],xy.x, xy.y +5);
    valueIndex++;
    ctx.closePath();
    ctx.fill();
    ctx.stroke();
  }
  
  valueIndex = 0;
  ctx.beginPath();
  ctx.fillStyle = "rgba(0, 0, 0, 0.2)";
  ctx.strokeStyle = "rgba(0, 0, 0, 0.3)";
  ctx.lineWidth = 5;
  var value = skills[pentagonIndex].values[valueIndex];
  xy = getXY(i, value * 0.3);
  ctx.moveTo(xy.x,xy.y);
  /*** SKILL GRAPH ***/
  for (var i = 0; i < sides; i++) {
    xy = getXY(i, value * 0.3);
    ctx.lineTo(xy.x,xy.y);
    valueIndex++;
    value = skills[pentagonIndex].values[valueIndex];
  }
  ctx.closePath();
  ctx.stroke();
  ctx.fill();
  valueIndex = 0;  
  pentagonIndex++;
});
＆＃13; 
body{
	background-color: #2D2D2D;
}

.carousel-spacing{
	padding-left: 20px;
	padding-right: 20px;
	padding-bottom: 20px;
}

.circle{
	width: 158px;
	height: 158px;
	margin: 50px auto;
	text-align: center;
	background-color: #51bbb5;
	overflow: hidden;
	border-radius: 50%;
	border: 5px solid #fff;
}

.carousel {
  display: none;
}

#graph{
	position: relative;
	z-index: 1;
	width: 125px;
	height: 90px;
	margin: 30px auto 0;
}

#graph div{
	position: absolute;
	bottom: 16px;
	width: 9px;
	height: 10px;
	background: #fff;
}

#graph div:nth-child(n+1){
	height: 16px;
	left: 24px;
	animation: chartIt 2s ease-in-out 0s;
	-webkit-animation: chartIt 2s 1 ease-in-out 0s;
}
#graph div:nth-child(n+2){
	height: 26px;
	left: 37px;
	animation: chartIt 2s ease-in-out .25s;
	-webkit-animation: chartIt 2s 1 ease-in-out .25s;
}
#graph div:nth-child(n+3){
	height: 42px;
	left: 50px;
	animation: chartIt 2s ease-in-out .5s;
	-webkit-animation: chartIt 2s 1 ease-in-out .5s;
}
#graph div:nth-child(n+4){
	height: 37px;
	left: 63px;
	animation: chartIt 2s ease-in-out .75s;
	-webkit-animation: chartIt 2s 1 ease-in-out .75s;
}
#graph div:nth-child(n+5){
	height: 50px;
	left: 76px;
	animation: chartIt 2s ease-in-out 1s;
	-webkit-animation: chartIt 2s 1 ease-in-out 1s;
}
#graph div:nth-child(n+6){
	height: 60px;
	left: 89px;
	animation: chartIt 2s ease-in-out 1.25s;
	-webkit-animation: chartIt 2s 1 ease-in-out 1.25s;
}
@keyframes chartIt{
	0% { max-height: 60px; }
	50% { max-height: 0px; }
	100% { max-height: 60px; }
}
@-webkit-keyframes chartIt{
	0% { max-height: 60px; }
	50% { max-height: 0px; }
	100% { max-height: 60px; }
}
.content {
  margin: auto;
  text-align: center;
}

#c {
  margin: auto;
}

.header {
  text-align: center;
  width: 100%;
  margin: auto;
  height: 25px;
}

.pentagon {
  width: 300px;
  height: 300px;
  margin: auto;
  padding: 3px 3px 28px 3px;
  display:inline-block;
}
＆＃13; 
<!DOCTYPE html>
<html>
<head>
	<title>Timothy Lampen</title>
</head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>


<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">

<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">

<link rel="stylesheet" type="text/css" href="styles.css">

<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>



<body>
	<nav class="navbar navbar-default">
		<div class="container-fluid">

			<div class="navbar-header">
				<a class="navbar-brand" href="#">Brand</a>
			</div>
			<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
				<ul class="nav navbar-nav">
					<li class="active"><a href="#">Home</a></li>
					<li><a href="#">Academics</a></li>
					<li><a href="#">Sports</a></li>
					<li><a href="#">HTML</a></li>
					<li><a href="#">Java</a></li>
				</ul>
			</div>

		</div>
	</nav>







	<div id="myCarousel" class="carousel slide carousel-spacing" data-ride="carousel">
		<div class="carousel-indicators">
			<ol class="carousel-indicators">
				<li data-target="#myCarousel" data-slide-to="0"></li>
				<li data-target="#myCarousel" data-slide-to="1"></li>
				<li data-target="#myCarousel" data-slide-to="2"></li>
				<li data-target="#myCarousel" data-slide-to="3"></li>
			</ol>
		</div>

		<div class="carousel-inner" role="listbox">
			<div class="item active">
				<img src="http://www.photoz.com.au/slides/Gibson%20Desert.jpg" alt="Pic1">
			</div>
			<div class="item">
				<img src="http://public.blu.livefilestore.com/y1pGz7y63cz8C2SNLsVyxkkFtSQB8Vd8VVrkNRkVirRuMoUbXGHPC2IL7T5HFeTpZYS9eeprUcOyyr_n3iuYjwBow/The%20Desert.jpg" alt="Pic2">
			</div>
			<div class="item">
				<img src="http://cahierslibres.fr/wp-content/uploads/2014/04/d%C3%A9sert.jpg" alt="Pic3">
			</div>
			<div class="item">
				<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/3/35/Wandering_in_the_desert.jpg/1280px-Wandering_in_the_desert.jpg" alt="Pic4">
			</div>
		</div>

		<a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
			<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
			<span class="sr-only">Previous</span>
		</a>
		<a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
			<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
			<span class="sr-only">Next</span>
		</a>
	</div>
	<div class="circle">
		<div id="graph">
			<div></div>
			<div></div>
			<div></div>
			<div></div>
			<div></div>
			<div></div>
			<div></div>
			<div></div>
		</div>
	</div>


	
</body>
</html>

<script type="text/javascript" src="script.js"></script>
<script>
	$(document).ready(function(){
      function changeAd(){ $(".circle").fadeOut(1000).delay(1000).addClass(".content").removeClass(".circle");
      $(".carousel").delay(1000).fadeIn(1000);
      }
      setTimeout(changeAd, 3000);
		       	});
</script>
＆＃13;
＆＃13;
＆＃13;

相关问题
最新问题