为什么onerror事件不工作的img标签，当jquery放在页脚

Why does onerror event not work for img tag when jquery is put in footer?

本文关键字：jquery 标签 事件 onerror 工作 img 为什么      更新时间：2023-09-26

考虑以下示例

<!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>

所有图片默认url错误。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>

问题很简单:

为什么onerror事件不工作的img标签时，把jquery在页脚?

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

你的代码不工作，因为错误事件引发之前你的jquery处理程序绑定。

浏览器加载在dom中找到的项。所以当你在最后添加jquery脚本时。浏览器将已经开始加载它们上面的img标签。当jQuery加载、解析、文档准备好、处理程序绑定时，大多数图像可能已经错误或加载。

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

<!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>

jquery using with class所以你可以使用。myimage

<!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>

相关文章：