一、功能说明

利用原生 JS 实现对图片静态资源链接是否有效进行判断：

如果资源链接有效，直接渲染；

如果资源链接失效，3秒后替换新的链接，进行第二次渲染；

如果新的链接仍然失效，直接取消加载，保证页面所有资源处于完全加载完毕状态。

---- Nick.Peng

二、动图效果展示

三、完整源代码

<!DOCTYPE HTML>
<html>
<head><meta charset="utf-8"><title>非第三方静态资源加载中断优化Demo</title>
</head>
<body><img id="img1" src="https://desk-fd.zol-img.com.cn/t_s960x600c5/g2/M00/0A/00/ChMlWl5V3O6IWBoeAAuH50uG1RoAANdqAGPBNEAC4f_6161.jpg"><script type="text/javascript">window.onload = function(){var load_count = 1;   // 定义变量记录加载次数// 设置定时器，3秒刷新一次var timer = setInterval(function() {var img_id = document.getElementById("img1"); //若是jq，则直接将此代码换成 var img_id = $("#img_id"); 即可。var imgObj = new Image();imgObj.src = img_id.src;                      //若是jq，则直接将此代码换成 imgObj.src = img_id.attr("src"); 即可。console.log('当前资源链接：' + img_id.src)console.log("大小：" + imgObj.width + "*" + imgObj.height);if (imgObj.width > 0 && imgObj.height > 0) {console.log("Loading done。。。");clearInterval(timer);     // 加载完成，清除定时器} else {if (load_count >= 2) {// 替换后的链接仍加载失败，删除img_id.remove();console.log("链接资源不存在，加载失败，删除。。。。。。");clearInterval(timer);} else {console.log("First time load fail, Begin replace。。。。。。");// 加载失败，替换img标签的src属性链接img_id.src="https://desk-fd.zol-img.com.cn/t_s960x600c5/g2/M00/0A/00/ChMlWl5V3O6IWBoeAAuH50uG1RoAANdqAGPBNEAC4f_616.jpg";load_count++;console.log('替换后：' + img_id.src);}}}, 3 * 1000);};</script>
</body>
</html>

利用 JS 判断页面图片静态资源链接是否有效是否加载完成相关推荐

利用JS弹出层实现简单的动态提示“正在加载中，请稍等...”
JQuery版本:1.7.1: 编写一个JS类(ck.layer.js): [javascript] view plaincopy /********************************* ...
利用JS弹出层实现简单的动态提示“正在加载中，请稍等...
最近项目中大量用到了JQuery中的Ajax异步加载数据,数据量非常大,导致每次加载的时候都感觉到非常非常慢,让客户体验非常不好,就想到用JS做一个简单的提示. JQuery版本:1.7.1: 编写一 ...
java Web程序使用wro4j合并、压缩js、css等静态资源
在Web项目中,js.css合并压缩,不仅有利于减少Http请求数量.减少宽带资源占用,还能有效的管理各种js.css的引入,使整个项目更加有序.而对于访问用户来说,其更大的好处是增加了页面的打开速度 ...
js合并压缩 java_Java Web程序使用wro4j合并、压缩js、css等静态资源
在Web项目中,js.css合并压缩,不仅有利于减少Http请求数量.减少宽带资源占用,还能有效的管理各种js.css的引入,使整个项目更加有序.而对于访问用户来说,其更大的好处是增加了页面的打开速度 ...
java css js 合并_java Web程序使用wro4j合并、压缩js、css等静态资源
在Web项目中,js.css合并压缩,不仅有利于减少Http请求数量.减少宽带资源占用,还能有效的管理各种js.css的引入,使整个项目更加有序.而对于访问用户来说,其更大的好处是增加了页面的打开速度 ...
构建多页面应用——静态资源的处理
在之前的系列文章中,我已经介绍了如何用webpack实现多页面应用的js,html,css的处理.今天就主要介绍如何处理静态资源,在web开发中最常见的静态资源就是图片. 图片的引用方式而因为在we ...
JS判断页面控件是否可用
JS判断页面控件是否可用[原创] 2009-12-08 16:27 如果你看到这篇文章,甚至目前正愁于该问题的困扰,希望你把这篇文章看完.至少下次不会在这个问题上浪费时间. 近期做的项目中涉及到页面控 ...
html js 如何判断页面是第一次访问还是重复刷新访问,使用JS判断页面是首次被加载还是刷新...
1 利用window.name属性在页面刷新时不会重置判断(在该属性空置的情况下可使用) if(window.name == ""){ console.log("首次被加 ...
JS判断页面加载完毕
//JS判断页面加载完毕,再隐藏加载效果层,一个简单的JS加载效果.document.onreadystatechange = function () {if (document.readyState ...

利用 JS 判断页面图片静态资源链接是否有效是否加载完成

文章目录

一、功能说明

二、动图效果展示

三、完整源代码

利用 JS 判断页面图片静态资源链接是否有效是否加载完成相关推荐

最新文章

热门文章