我们常常会遇到 img 加载图片的时候因为网络问题或者图片过大导致图片加载失败的问题, 页面就因为这张蹦掉的图变得不美观所以我们需要图片加载失败的时候重新加载图片
- //js 方法定义
- function resetImgUrl(imgObj,imgSrc,maxErrorNum){
- if(maxErrorNum > 0){
- imgObj.onerror=function(){
- reSetImgUrl(imgObj,imgSrc,maxErrorNum-1);
- };
- setTimeout(function(){
- imgObj.src=imgSrc;
- },500);
- }else{
- imgObj.onerror=null;
- imgObj.src="<%=basePath%>images/noImg.png";
- }
- }
- // 调用
- <img onerror='resetImgUrl(this,this.src,3)' src='"+srcStr+"'/>
- // 该逻辑摘自网络 http://sunshuaij2ee.iteye.com/blog/1727993
判断网络连接情况, 重新连接网络时再请求图片
- var onLine = true
- var eventList = {}; // 用于储存待重新执行函数的事件列表
- window.addEventListener('offline',
- function() {
- onLine = false;
- }) window.addEventListener('online',
- function() {
- if (onLine == false) {
- onLine = true;
- reLine();
- }
- })
- // 重新连接网络的时候重新调用事件列表对象里面的函数
- function reLine() {
- for (var key in eventList) {
- if (!eventList[key]) continue
- var arg = eventList[key].arg;
- var thisOnFn = eventList[key].that;
- eventList[key].fun.apply(thisOnFn, arg);
- eventList[key] = null;
- }
- }
- // 已经断网了, 把函数存储到一个对象里面
- function offlined(fun, arg, that) {
- if (!onLine) {
- //arg = arguments;
- var name = fun.name || '__new';
- eventList[name] = {};
- eventList[name].fun = fun; // 原函数
- eventList[name].that = that; // 原上下文对象
- eventList[name].arg = [].slice.call(arg); // 原参数
- return true
- }
- return false
- }
测试一下
- function aa() {
- offlined(aa, arguments, this) for (var i = 0; i < arguments.length; i++) {
- console.log(arguments[i]);
- }
- }
- // 断开网络再执行一下代码
- aa(123, 234, 345)
- // 先输出一遍
- 123 234 345
- // 再连接上网络后看输出
- 123 234 345
结合上面的图片重新加载逻辑
- function resetImgUrl(imgObj, imgSrc, maxErrorNum) {
- if (offlined(reSetImgUrl, arguments, this)) return if (maxErrorNum > 0) {
- imgObj.onerror = function() {
- reSetImgUrl(imgObj, imgSrc, maxErrorNum - 1);
- };
- setTimeout(function() {
- imgObj.src = imgSrc;
- },
- 500);
- } else {
- imgObj.onerror = null;
- imgObj.src = "<%=basePath%>images/noImg.png";
- }
- }
来源: http://www.jianshu.com/p/f63425d224b7