                        课程
                    
                        /前端开发
                        
                            /JavaScript
                        
                        /常用的网页加载进度条

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

<!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>

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

jinqianmofashi

2017-07-04

源自：常用的网页加载进度条 2-1

关注问题我要回答

1079

操作

收起

4 回答

奋斗好青年
2017-10-16

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

0 回复有任何疑惑可以回复我~

收起回答

郑州森度慕光
2017-07-16

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

0 回复有任何疑惑可以回复我~

收起回答

慕先生3356621
2017-07-12

<!DOCTYPE html>

<html>

<head>

<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>

$(function(){

setInterval(function(){

$(".loading").fadeOut();

},3000)

})

</script>

</head>

<body>

</div>

</body>

</html>