当jquery放入页脚时，为什么onerror事件对img标签不起作用？

时间：2016-09-05 08:25:52

标签： javascript jquery html

考虑以下示例

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <style>
    img {
      max-width:600px;
    }
  </style>
  <script src="https://code.jquery.com/jquery-3.1.0.js"></script> 
</head>
<body>
  <div><img class="myimage" src="http://www.planwall.com/lk.jpg" alt="org"></div>
  <div><img class="myimage" src="http://www.planwer.com/my.jpg" alt="org"></div>
  <div><img class="myimage" src="http://www.plwallpaper.com/static/images/slkdl.png" alt="org"></div>
  <div><img class="myimage" src="http://www.pnwallpaper.com/static/images/er5.png" alt="org"></div>
  <div><img class="myimage" src="http://www.planwlpaper.com/static/images/3col.png" alt="org"></div>
  <div><img class="myimage" src="http://www.planaper.com/sttic/images/fghdfg.png" alt="org"></div>
  <div><img class="myimage" src="http://www.pwalper.com/sttic/imaes/3dsfgdg45.png" alt="org"></div>
  <div><img class="myimage" src="http://www.planwallpaper.com/static/images/34rt5.png" alt="org"></div>
  <div><img class="myimage" src="http://www.planwaaper.com/static/images/7004205-cool-black-backgrounds-27640_lhK8IKI.jpg" alt=""></div>
  <div><img class="myimage" src="http://www.wallpeast.com/wallpaper-cool/page/4#static/images/free-cool-wallpaper-17426-18158-hd-wallpapers.jpg" alt=""></div>
  <script>  
  /*
    for(var i=0; i<document.getElementsByTagName("img").length; i++) {      
      document.getElementsByTagName("img")[i].addEventListener("error", function() {
        this.src = "https://cdn.colorlib.com/wp/wp-content/uploads/sites/2/404-not-found-error-page-examples.png";        
      });      
    }
    */   
  </script>
  <script>

   $(document).ready(function(){  
    $("img").on("error", function(){
      $(this).attr( "src", "http://www.freeiconspng.com/uploads/error-icon-28.png" );      
    });
  });

</script>


</body>
</html>

默认情况下，所有图片都有错误的网址。 error事件已分配给所有img标记。获得错误的src图像已更改。一切正常。问题是如果我将jquery cdn放在页脚中，那么src属性不会被替换。示例如下：

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <style>
    img {
      max-width:600px;
    }
  </style>

</head>
<body>
  <div><img class="myimage" src="http://www.planwall.com/lk.jpg" alt="org"></div>
  <div><img class="myimage" src="http://www.planwer.com/my.jpg" alt="org"></div>
  <div><img class="myimage" src="http://www.plwallpaper.com/static/images/slkdl.png" alt="org"></div>
  <div><img class="myimage" src="http://www.pnwallpaper.com/static/images/er5.png" alt="org"></div>
  <div><img class="myimage" src="http://www.planwlpaper.com/static/images/3col.png" alt="org"></div>
  <div><img class="myimage" src="http://www.planaper.com/sttic/images/fghdfg.png" alt="org"></div>
  <div><img class="myimage" src="http://www.pwalper.com/sttic/imaes/3dsfgdg45.png" alt="org"></div>
  <div><img class="myimage" src="http://www.planwallpaper.com/static/images/34rt5.png" alt="org"></div>
  <div><img class="myimage" src="http://www.planwaaper.com/static/images/7004205-cool-black-backgrounds-27640_lhK8IKI.jpg" alt=""></div>
  <div><img class="myimage" src="http://www.wallpeast.com/wallpaper-cool/page/4#static/images/free-cool-wallpaper-17426-18158-hd-wallpapers.jpg" alt=""></div>
  <script>  
  /*
    for(var i=0; i<document.getElementsByTagName("img").length; i++) {      
      document.getElementsByTagName("img")[i].addEventListener("error", function() {
        this.src = "https://cdn.colorlib.com/wp/wp-content/uploads/sites/2/404-not-found-error-page-examples.png";        
      });      
    }
    */   
  </script>
  <script src="https://code.jquery.com/jquery-3.1.0.js"></script> 
  <script>
   $(document).ready(function(){  
    $("img").on("error", function(){      
      $(this).attr( "src", "http://www.freeiconspng.com/uploads/error-icon-28.png" );  
    });
  });

</script>


</body>
</html>

问题很简单：

  

当jquery放在页脚中时，为什么onerror事件对img标记不起作用？

当我查看控制台时，10个中只有3个或4个图像收到错误，其他图像附加[18ms]或其他时间如“[21ms]等。

2 个答案:

答案 0 :(得分：1)

由于在绑定jquery处理程序之前引发了错误事件，因此您的代码无法正常工作。

浏览器加载项目，因为它们在dom中找到。所以当你在最后添加jquery脚本时。浏览器已经开始加载它们上面的img标签。当jQuery加载解析并且你的文档准备就绪并且你的处理程序被绑定时，你的大部分图像都会被错误编辑或加载。

下面的代码可以工作，因为在文档准备好之后它会创建一个内存中的img项目来检查图像是否正确加载。添加的其他图像将由处理程序处理。

＆＃13;
＆＃13; 
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <style>
    img {
      max-width:600px;
    }
  </style>

</head>
<body>
  <div><img class="myimage" src="http://www.planwall.com/lk.jpg" alt="org"></div>
  <div><img class="myimage" src="http://www.planwer.com/my.jpg" alt="org"></div>
  <div><img class="myimage" src="http://www.plwallpaper.com/static/images/slkdl.png" alt="org"></div>
  <div><img class="myimage" src="http://www.pnwallpaper.com/static/images/er5.png" alt="org"></div>
  <div><img class="myimage" src="http://www.planwlpaper.com/static/images/3col.png" alt="org"></div>
  <div><img class="myimage" src="http://www.planaper.com/sttic/images/fghdfg.png" alt="org"></div>
  <div><img class="myimage" src="http://www.pwalper.com/sttic/imaes/3dsfgdg45.png" alt="org"></div>
  <div><img class="myimage" src="http://www.planwallpaper.com/static/images/34rt5.png" alt="org"></div>
  <div><img class="myimage" src="http://www.planwaaper.com/static/images/7004205-cool-black-backgrounds-27640_lhK8IKI.jpg" alt=""></div>
  <div><img class="myimage" src="http://www.wallpeast.com/wallpaper-cool/page/4#static/images/free-cool-wallpaper-17426-18158-hd-wallpapers.jpg" alt=""></div>
  <script>  
  /*
    for(var i=0; i<document.getElementsByTagName("img").length; i++) {      
      document.getElementsByTagName("img")[i].addEventListener("error", function() {
        this.src = "https://cdn.colorlib.com/wp/wp-content/uploads/sites/2/404-not-found-error-page-examples.png";        
      });      
    }
    */   
  </script>
  <script src="https://code.jquery.com/jquery-3.1.0.js"></script> 
  <script>
   $(document).ready(function(){  
     $("img").each(function(i,ele){
        $("<img/>").attr("src",$(ele).attr("src")).on('error', function() {             
            $(ele).attr( "src", "http://www.freeiconspng.com/uploads/error-icon-28.png" );
         })
     });
     
    $("img").on("error", function(){      
      $(this).attr( "src", "http://www.freeiconspng.com/uploads/error-icon-28.png" );  
    });
  });

</script>


</body>
</html>
＆＃13;
＆＃13;
＆＃13;

答案 1 :(得分：-4)

jquery与class一起使用 所以你可以使用.myimage

＆＃13;
＆＃13; 
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <style>
    img {
      max-width:600px;
    }
  </style>

</head>
<body>
  <div><img class="myimage" src="http://www.planwall.com/lk.jpg" alt="org"></div>
  <div><img class="myimage" src="http://www.planwer.com/my.jpg" alt="org"></div>
  <div><img class="myimage" src="http://www.plwallpaper.com/static/images/slkdl.png" alt="org"></div>
  <div><img class="myimage" src="http://www.pnwallpaper.com/static/images/er5.png" alt="org"></div>
  <div><img class="myimage" src="http://www.planwlpaper.com/static/images/3col.png" alt="org"></div>
  <div><img class="myimage" src="http://www.planaper.com/sttic/images/fghdfg.png" alt="org"></div>
  <div><img class="myimage" src="http://www.pwalper.com/sttic/imaes/3dsfgdg45.png" alt="org"></div>
  <div><img class="myimage" src="http://www.planwallpaper.com/static/images/34rt5.png" alt="org"></div>
  <div><img class="myimage" src="http://www.planwaaper.com/static/images/7004205-cool-black-backgrounds-27640_lhK8IKI.jpg" alt=""></div>
  <div><img class="myimage" src="http://www.wallpeast.com/wallpaper-cool/page/4#static/images/free-cool-wallpaper-17426-18158-hd-wallpapers.jpg" alt=""></div>
  <script>  
  /*
    for(var i=0; i<document.getElementsByTagName("img").length; i++) {      
      document.getElementsByTagName("img")[i].addEventListener("error", function() {
        this.src = "https://cdn.colorlib.com/wp/wp-content/uploads/sites/2/404-not-found-error-page-examples.png";        
      });      
    }
    */   
  </script>
  <script src="https://code.jquery.com/jquery-3.1.0.js"></script> 
  <script>
   $(document).ready(function(){  
    $(".myimage").on("error", function(){      
      $(this).attr( "src", "http://www.freeiconspng.com/uploads/error-icon-28.png" );  
    });
  });

</script>


</body>
</html>
＆＃13;
＆＃13;
＆＃13;

相关问题
最新问题