概要

onerror:监听图片加载失败
onload:监听图片加载成功

利用闭包自调用控制重新加载次数,并在一定时间后赋予图像默认值

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <img
      onerror="retry(this,3)"
      onload="console.log('加载成功')"
      src="http://"
      alt="加载失败"
    />
    <script>
      /**
       * @arguments_1 img元素实例,this
       * @arguments_2 重试次数
       * @return void
       */
      function retry(imgElement, number = 3) {
        console.log(`图片加载失败,将会重试${number}次`);
        if (number > 0) {
          //重写img加载错误事件,img之后的每次加载错误都会调用这个箭头函数
          imgElement.onerror = () => {
            //该箭头函数调用父级函数,并访问父级函数的数据,形成闭包
            retry(imgElement, number - 1);
          };
          //一秒后重定向图片路径,引起重新加载
          setTimeout(() => {
            imgElement.src = imgElement.src;
          }, 1000);
        } else {
          //次数超过后取消错误监听,并设置默认路径.
          imgElement.onerror = null;
          imgElement.src =
            "http://150.158.173.92:3000/public/images/props/1111.jpg";
        }
      }
    </script>
  </body>
</html>

前端优化-图片加载失败重试

概要