为什么我都是按照老师教的敲,还是实现不了?求老师帮忙看看问题出在哪里?

来源:2-4 将无序预加载写成jQuery插件

十三亿学渣的希望

2017-08-29 13:27

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Document图片预加载</title>
<style type="text/css">
html,body{
height:100%;
}
a{
text-decoration: none;
}
.box{
text-align: center;
}
.btn{
display: inline-block;
height: 30px;
line-height: 30px;
border: 1px solid #ccc;
background-color: #fff;
padding: 0 10px;
margin-right: 50px;
color: #333;
}
.btn:hover{
color: #eee;
}
.loading{
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: #eee;
text-align: center;
font-size: 30px;
}
.progress{
margin-top: 300px;
}
</style>
</head>
<body>
<div>
<img src="http://i2.hoopchina.com.cn/user/308/15960308/13383588090.jpg " alt="pic" id="img" width="1200px" />
<p>
<a href="javascript:;" data-control="prev">上一页</a>
<a href="javascript:;" data-control="next">下一页</a>
</p>
</div>
<div>
<p>0%</p>
</div>
<script src="js/jquery-1.11.1.min.js"></script>
<script src="js/preload.js"></script>
<script type="text/javascript">
/*var imgs = [
'http://i2.hoopchina.com.cn/user/308/15960308/13383588090.jpg',

'http://img.article.pchome.net/00/44/23/20/pic_lib/wm/2.jpg',

'http://lcd.yesky.com/imagelist/2009/044/404q4y8g4m0p.jpg',

'http://lcd.yesky.com/imagelist/2009/044/cgro54wt2t2x.jpg'
]

var index = 0,
     len = imgs.length,
     count = 0,
     $progress = $('.progress');
     $.each(imgs, function(i, src){
      var imgObj = new Image();

      $(imgObj).on("load error",function(){
      $progress.html(Math.round((count +1) / len*100) + '%');
      if (count>=len-1) {
      $('.loading').hide();
      document.title = '1/'+len;
      }

      count++;
      });
      imgObj.src = src;
     })

     $('.btn').on('click',function(){
      if ('prev' === $(this).data('control')  ){//上一张
      index=Math.max(0,--index);
      }else{//下一张
      index=Math.min(len-1,++index)
      }
      document.title = (index+1)+'/'+len;
      $("#img").attr('src',imgs[index]);
     })
     */

     var imgs = [
'http://i2.hoopchina.com.cn/user/308/15960308/13383588090.jpg',

'http://img.article.pchome.net/00/44/23/20/pic_lib/wm/2.jpg',

'http://lcd.yesky.com/imagelist/2009/044/404q4y8g4m0p.jpg',

'http://lcd.yesky.com/imagelist/2009/044/cgro54wt2t2x.jpg'
]

var index = 0,
     len = imgs.length;
     $progress = $('.progress');
     $.preload(imgs, {
      each:function(count){
$progress.html(Math.round((count +1) / len*100) + '%');
      },
      all:function(){
      $('.loading').hide();
      document.title = '1/'+ len;
      }
     });
   

     $('.btn').on('click',function(){
      if ('prev' === $(this).data('control')  ){//上一张
      index=Math.max(0,--index);
      }else{//下一张
      index=Math.min(len-1,++index)
      }
      document.title = (index+1)+'/'+len;
      $("#img").attr('src',imgs[index]);
     })
     
</script>
</body>
</html>
//图片预加载
(function($) {
	function PreLoad(imgs, options){
		this.imgs = (typeof imgs === 'string') ? [imgs] : imgs;
		this.opts = $.extend({}, PreLoad.DEFAULTS, options);//初始化

		this._unoredered();//_表示只能内部使用,不可以外部调用
	}
	PreLoad.DEFAULTS = {
		each:null,  //每一张图片加载完毕后执行
		all:null  //所有图片加载完毕后执行
	};
	PreLoad.prototype._unoredered = function(){//无序加载
		var imgs = this.imgs,
		      opts = this.opts,
		      count = 0,
		      len = imgs.length;
		$.each(imgs, function(i, src){
			if (typeof src != 'string') return;
		      	var imgObj = new Image();
		      	$(imgObj).on("load error",function(){
		      		opts.each && opts.each(count);
		      		if (count>=len-1) {
		      			opts.all && opts.all();
		      		}
		      		count++;
		      	});
		      	imgObj.src = src;
		      });
	};
	
	$.extend({
		preload : function(imgs,opts){
			new PreLoad(img, opts);
		}
	});
})(jQuery);


写回答 关注

7回答

  • weibo_时代雨_03142734
    2019-03-30 17:41:45

    第一是很多class名没加上,没发现页面样式都不起作用吗,第二js十一行分号格式不对,要英文状态输入,第三就是实例化的时候new Preload(imgs,opts);

    weibo_...

    js是十二行的分号

    2019-03-30 17:42:56

    共 1 条回复 >

  • qq_零_137
    2018-09-18 15:51:26

    https://img3.mukewang.com/5ba0ae640001ab2307050322.jpg

    类名没添加

  • qq_零_137
    2018-09-18 15:49:12

    https://img1.mukewang.com/5ba0adcf00012ff607750197.jpg

    添加class="box"

  • 流觞醉月
    2018-05-15 19:15:06

    最后封装插件那里  传的参数不一致imgs和img

  • 慕先生3734567
    2017-09-21 11:42:19

    我看到你的DOM元素没加class

  • confused
    2017-08-29 16:08:13

    http://img.mukewang.com/59a520cb0001514608670281.jpg这里的分号格式不对

    十三亿学渣的... 回复小鸡饭

    还是没有查出来

    2017-09-05 22:01:22

    共 3 条回复 >

  • confused
    2017-08-29 14:43:26

    应该是unordered而不是unoredered,多写了一个e

    十三亿学渣的... 回复confus...

    去掉了还是不起作用,页面就一直显示0%

    2017-08-29 15:26:16

    共 3 条回复 >

图片预加载

预知发生的行为,提前加载需要的图片,获得更好的用户体验

40980 学习 · 81 问题

查看课程

相似问题