问答详情
源自：2-1 网页加载进度条误区

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

<!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 13:35

个回答

  • 奋斗好青年
    2017-10-16 15:35:17

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

    0
  • 郑州森度慕光
    2017-07-16 15:28:02

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

    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
  • wry4220877
    2017-07-04 15:28:33

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

    0