load事件不起作用。我的代码在下面-慕课网

load事件不起作用。我的代码在下面

来源：2-3 实例1图片相册之使用预加载

小馒头达人

2017-05-01 00:40

<!DOCTYPE html>
<html>
   <head>
       <meta charset="utf-8" />
       <title></title>
       <link rel="stylesheet" href="css/pic-style.css" />
   </head>
   <body>
       <div class="box">
           <img class="show-pic-img" src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1493570481701&di=66c4ca24a32fe7804fed3ccaa4eb6e29&imgtype=0&src=http%3A%2F%2Fimg.qqzhi.com%2Fupload%2Fimg_4_3830333259D4104374783_23.jpg" alt="pic"/>
       </div>
       <p class="btn-group">
           <a class="btn" data-controller="pre">上一页</a>
           <a class="btn" data-controller="next">下一页</a>
       </p>
       <div class="loading">
           <p class="process">0%</p>
       </div>
       <script type="text/javascript" src="http://libs.baidu.com/jquery/1.11.3/jquery.min.js" ></script>
       <script>

               var imgs = [
                   "http://pic51.nipic.com/file/20141031/8098773_204507657000_2.jpg",
                   "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1493573227020&di=88b68c3abc22f3447874c46467250e45&imgtype=0&src=http%3A%2F%2Fpic.90sjimg.com%2Fback_pic%2Fqk%2Fback_origin_pic%2F00%2F03%2F14%2Fe2a29babb8cd6a64273028cc1d59b609.jpg",
                   "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1493573263248&di=483dafba8571c9df56934bbeefab1372&imgtype=0&src=http%3A%2F%2Fpic2.ooopic.com%2F10%2F92%2F51%2F13b1OOOPIC40.jpg",
                   "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1494168013&di=e15fc598f4df6436e92318207cc164f9&imgtype=jpg&er=1&src=http%3A%2F%2Fpic32.photophoto.cn%2F20140725%2F0008020985767197_b.jpg",
                   "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1493573316207&di=c66512bb076f2e8b608db0b693d767c9&imgtype=0&src=http%3A%2F%2Fimg.taopic.com%2Fuploads%2Fallimg%2F120321%2F58003-120321161Z937.jpg"
               ]
               var count = 0,len = imgs.length;
               $process = $(".process");
               $.each(imgs, function(i,src) {

                   var imgobj = new Image();
                   $(imgobj).on('load',function(){
                       alert('00');
                   });

                   /*$(imgObject).on('load',function(){
                       alert(imgObject);
                       /*alert(Math.round((count + 1)/len * 100)+"%");
                       $process.html(Math.round((count + 1)/len * 100)+"%");
                       if(count >= len -1){
                           $process.hide();
                           document.title = "1/"+len;
                       }
                       imgObject.src = src;
                       count ++;
                   });*/

               });
               $(".btn").on('click',function(){
                   if($(this).attr("data-controller") === "pre"){
                       count = Math.max(0,--count);
                   }else if($(this).attr("data-controller") === "next"){
                       count = Math.min(len-1,++count);
                   }
                   document.title = (count+1)+"/"+len;
                   /*alert((count+1)+"/"+length);*/
               });
       </script>
   </body>
</html>

写回答关注

5回答

yangtongjie

2017-07-27 14:55:01

我是把$progress改成progress 好了

0 0
糖不甩

2017-07-04 18:22:05

$.each(imgs,function(i,src){
var imgObj = new Image();
$(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; //这里到赋值语句要写在触发加载事件之后
});

0 0
_Rock

2017-06-10 00:19:58

onload()事件是加载完毕才触发的事件，而你的img的src为空，根本就不会加载，也就不存在加载完毕，所以不会触发onload事件，求采纳

0 0
渐惯沉默0_0

2017-05-30 15:44:40

插件zainali?

0 0

啊啊啊啊123: 2017-05-01 11:38:31

var imgobj = new Image();
 $(imgobj).on('load',function(){
   alert('00');
 });
imgobj.src = src;//加上这个就能弹出了

找半天。。。

0 0

图片预加载

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

40976 学习 · 88 问题

查看课程

相似问题

为什么我的load始终无法触发

回答 3

添加控制点击panel以外的地方panel隐藏，在点击panel里面子元素则不作操作的功能：

回答 1

请问imgs.forEach(function(elem))中的elem是指事件对象吗，可以用e带替吗

回答 2

这行代码看不明白

回答 3

没有赋值imgObj.src,可以先load图片吗？

回答 2

打开慕课网App查看更多内容