一、功能说明

封装上一篇博文《利用 JS 判断页面图片静态资源链接是否有效是否加载完成》的 JS 文件，让JS变得更加通用；
- 在原有的功能上新增了，动态替换失效链接；
- 通过标签属性的方式给 JS 进行传参；

二、页面中使用方法

在引入 JS 时，通过 timing 属性给 JS 设置参数，不指定参数JS将采取默认值；

<!DOCTYPE HTML>
<html>
<head>
  <meta charset="utf-8">
  <title>非第三方静态资源加载中断优化Demo</title>
  <!-- 引入js文件，并新增属性timing来指定js参数 -->
  <script id="time_ctrl" src="js/demo1.js" timing="3"></script>
</head>
<body>
  <img src="https://desk-fd.zol-img.com.cn/t_s960x600c5/g2/M00/0A/00/ChMlWl5V3O6IWBoeAAuH50uG1RoAANdqAGPBNEAC4f_616.jpg">
  <img src="https://desk-fd.zol-img.com.cn/t_s960x600c5/g2/M00/0A/00/ChMlWl5V3O6IWBoeAAuH50uG1RoAANdqAGPBNEAC4f_6161.jpg">
  <script type="text/javascript">

  </script>
</body>
</html>

三、完整JS代码

HTML 在引入 JS 时，通过 timing 属性给 JS 设置参数，然后再 JS 中通过获取标签属性的值来进行传参；

如果没有进行传参，默认定时时间为 5 秒触发一次；

var num = 5;  // 定时器默认5秒触发一次
if (document.getElementById("time_ctrl")) {
  num = document.getElementById("time_ctrl").getAttribute("timing")
}
window.onload = function(){
  var load_count = 1;
  var reg_cdn = RegExp(/cdnimg1.com/);   // img地址域名
  var reg_raw = RegExp(/cdnimg2.com/);   // img备用地址域名，用作加载失败时替换
  var img_tag = document.getElementsByTagName("img");

  var timer = setInterval(function(){
    for (var i = 0; i<img_tag.length; i++) {
      // 监听指定的img资源
      if (img_tag[i].src.match(reg_cdn) || img_tag[i].src.match(reg_raw)) {
        var imgObj = new Image();
        imgObj.src = img_tag[i].src;
        if (imgObj.width > 0 && imgObj.height > 0) {
          console.log(i+" Loading done.");
          if (load_count >= 2 || i == img_tag.length - 1 && load_count == 1) {
            clearInterval(timer)
          }
        } else {
          if (load_count >= 2) {
            clearInterval(timer);
            // 替换后的备用链接仍加载失败，删除标签
            img_tag[i].remove();
            console.log(i+" The resource does not exist, The tag has been removed.");
            load_count++
          } else {
            // 指定的img资源加载失败，替换备用链接
            console.log(i+" First time load fail, Begin replace the standby address.");
            img_tag[i].src=img_tag[i].src.replace(reg_cdn, reg_raw);
            load_count++
          }
        }

      } else {
        console.log(i+" It's not Specified resource.");
        if (load_count > 2 || i == img_tag.length - 1 && load_count == 1) {
          clearInterval(timer)
        }
      }
    }
  }, num*1000)
};

Nick Peng

发布了174 篇原创文章 · 获赞 663 · 访问量 47万+

私信关注

使用 script 标签引入 JS 时利用标签属性动态给 JS 传参

目录

一、功能说明

二、页面中使用方法

三、完整JS代码

猜你喜欢