为什么我的加载页没效果,直接重0就跳过去了,调试看数组也遍历过了,就是没执行触发load事件后的代码
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>图片预加载之无序加载</title> <script src="../js/jquery.min.1.7.js"></script> <style> html,body{ height: 100%; } .box{ text-align: center; } .btn,.btn:link{ display: inline-block; text-decoration: none; height: 30px; line-height: 30px; border: 1px #cccccc solid; background: #ffffff; padding: 0px 10px; margin-right: 50px; color: #333333; } .btn:hover{ background: #dddddd; } .loading{ position: fixed; top:0; left: 0px; width: 100%; height: 100%; background: #eeeeee; text-align: center; font-size: 30px; } .progress{ margin-top: 300px; } </style> </head> <body> <div> <p>0</p> </div> <div> <img id="img" src="../imgs/1.jpg" alt="pic" height="800" width="960"/> <p> <a href="#" data-control="prev">上一页</a> <a href="#" data-control="next">下一页</a> </p> </div> <script> var imgs = ['../imgs/1.jpg','../imgs/2.jpg','../imgs/3.jpg','../imgs/4.jpg','../imgs/5.jpg']; var now = 0; var len = imgs.length; var count = 0; $progress = $('.progress'); $('.btn').on('click',function () { if($(this).data('control') ==='prev'){ /*now先自减1再和0比较 若小于0则赋给now*/ now = Math.max(0,--now); }else if($(this).data('control') ==='next'){ now = Math.min(len-1,++now); } document.title = (now+1)+"/"+len $('#img').attr('src',imgs[now]); }); $.each(imgs,function (i,src) { /*图片加载完会触发load事件,出错触发error事件*/ var imgObj = new Image(); /*绑定load事件*/ $(imgObj).on('load',function () { $progress.html(Math.round(count+1/len * 100)+'%'); if(count>=len-1){ $('.loading').hide(); document.title='1/'+len; } count++; }); imgObj.src = src; }); </script> </body> </html>
$('#img').attr('src',imgs[now]);和imgObj.src = src; 前者是从数组中获取图片的路径,后者又是干什么啦……
问题差不多想清楚了,我的图片太大,有的浏览器不显示,有的从缓存拿还需要一段时间