一样的代码怎么不显示一样的效果？-慕课网

一样的代码怎么不显示一样的效果？

来源：2-1 网页加载进度条误区

jinqianmofashi

2017-07-04 13:35

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0;" name="viewport" />
<title>无标题文档</title>
<link href="jquery-3.2.2.js" type="text/javascript" />
<style>
.loading{
	width:100%; height:100%; position:fixed; top:0; left:0; z-index:100; background:#FFF;
	}
.loading .pic{width:64px; height:64px; background:url(image/5.gif); position:absolute; top:0; bottom:0; left:0; right:0; margin:auto;
}
</style>
<script>
$(function(){
	
	var loading='<div class="loading"><div class="pic"></div></div>'
	$("body").append(loading);
	
	setInterval(function(){
		$(".loading").fadeOut();
		},3000)
})
</script>
</head>
<body>

<img src="http://imgsrc.baidu.com/imgad/pic/item/1e30e924b899a9017c518d1517950a7b0208f5a9.jpg" alt="" />
</body>
</html>

这代码有什么问题吗，怎么不能出现视频中的效果啊，直接显示图片

写回答关注

4回答

奋斗好青年

2017-10-16 15:35:17

我也是按照视频来写,也不行,发现是用了append之后代码会加到/body结束之前,所以我后来改成prepend是将代码插入到body里面的代码前面,这样就可以了.

0 0
郑州森度慕光

2017-07-16 15:28:02

第9行代码：应该采用<script src=""></script>引入方式，因为引入的是JS。不是CSS。所以用LINK标签可能不对。

0 0
慕先生3356621

2017-07-12 18:35:09
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>定时器进度条</title>
<style>
.loading{width: 100%; height: 100%; position: fixed; top: 0;left: 0;z-index: 100;
background: #fff;}
.loading.pic{width:64px ;height: 64px;border: 10px solid red;background: url(img/loading.gif);position: absolute;top: 0;bottom: 0;left: 0;right: 0;margin: auto;} /*为啥进度条没出来，连红色框都没出来，，我用HBuilder软件 */

</style>
<script src="js/jquery-1.3.2.min.js"></script>
<script>
$(function(){

setInterval(function(){
$(".loading").fadeOut();
},3000)

})

</script>
</head>
<body>
<div class="loading">
<div class="pic"></div>
</div>
<img src="img/2.jpg" alt="" />
<img src="img/3.jpg" alt="" />
<img src="img/4.jpg" alt="" />
<img src="img/5.jpg" alt="" />
<img src="img/6.jpg" alt="" />
</body>
</html>
0 0
wry4220877

2017-07-04 15:28:33

var loading='<div class="loading"><div class="pic"></div></div>'没加“；”

2 0

郑州森度慕光

加了之后也是没出效果。求解答。

2017-07-16 15:25:12

共 2 条回复 >