H5W3
当前位置:H5W3 > 其他技术问题 > 正文

【Web前端问题】图片加载失败时,重试加载,如果重试加载不出来显示默认图片,不知道这样写对不对?高人指点一下

<body>
   <img  id="img"  src="clock60.png"  retry="0" onerror="errorImg(this)" />

   <script>

   function errorImg(img) { 

     var retry= $('#img').attr("retry");
     if(retry>0)
     {
        $('#img').src="1.png";
     }
     else
     {
        retry = retry++;
        $('#img').attr("retry",retry);
        var sourceSrc=$('#img').src;
        $('#img').src=null;
        $('#img').src=sourceSrc;

     }
   </script>
</body>

回答:

先贴出正确的做法:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="http://cdn.bootcss.com/jquery/2.1.0-beta3/jquery.min.js"></script>
</head>
<body>
<img id="img"  src="clock60.png"  retry="0" >
<script>
$(function() {
    $('#img').on('error', function() {
        var retry= $('#img').attr("retry");

        if (retry > 0) {
            $('#img').attr('src', '/wp-content/uploads/aaacj/202104181234/6697122026.png');
        } else {
            retry++;

            $('#img').attr("retry", retry);
            $('#img').attr('src', $('#img').attr('src'));
        }
    });
})   
</script>
</body>
</html>

你里面还有一个有点大的坑,就是这里:

retry = retry++;

其结果并没有实现加1,还是保留是原值 0.

另外还有jquery 和 js 操作原始dom想混淆的地方。

$('#img').src
要么 $('#img')[0].src
要么 $('#img').attr('src')

回答:

不知道你用的是不是jquery。
如果是jquery的话,设置属性值的应该是$(“img”).attr(“src”,sourceSrc);.你的语法我好像还没见过。。。

 function errorImg(img) { 

     var _this=$(img);
     var retry= _this.attr("retry");

     if(retry>0){
       _this.attr("src","1.png");
     }else{
        retry = retry++;
        _this.attr("retry",retry)
             .attr("src",_this.attr("src"));
     }
  }

本文地址:H5W3 » 【Web前端问题】图片加载失败时,重试加载,如果重试加载不出来显示默认图片,不知道这样写对不对?高人指点一下

评论 0

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址