解决js图片加载时出现404的问题


Posted in Javascript onNovember 30, 2020

运营网站久了之后,无法避免会出现图片404的情况,原因可能是图片文件本来就不存在或目前不存在。常见的解决方案是将404图片隐藏或者是替换为默认的图片。 

img标签事件属性

img标签可使用的时间属性有:

onabort, onbeforeunload, onblur, onchange, onclick, oncontextmenu, ondblclick, ondrag, ondragend, ondragenter, ondragleave, ondragover, ondragstart, ondrop, onerror, onfocus, onkeydown, onkeypress, onkeyup, onload, onmessage, onmousedown, onmousemove, onmouseover, onmouseout, onmouseup, onmousewheel, onresize, onscroll, onselect, onsubmit, onunload

img标签常用的事件如下:

onerror:图像加载过程中发生错误时被触发。
onabort:图片加载的时候,用户通过点击停止加载时触发,通常在这里触发一个提示:“图片正在加载”。
onload:当图片加载完成之后触发。

1. 对图片监听onerror事件

<img src="someimage.png" onerror="imgError(this);" /> 
 
// 原生JS: 
function imgError(image){ 
 // 隐藏图片 
 image.style.display = 'none'; 
 // 替换为默认图片 
 // document.getElementById("img").setAttribute("src", "images/demo.png"); 
} 
 
// 使用jQuery处理: 
function imgError(image){ 
 $(image).hide(); 
 // $(this).attr("src", "images/demo.png"); 
}

注意:需要将处理函数定义在head,防止图片加载出错时没有读取到处理函数

2. 使用jQuery监听error

// 通常不会再HTML里面内联js,可以使用.error对图片进行监听处理 
$('#test img').error(function() { 
 $(this).hide(); 
 // $(this).attr("src", "images/demo.png"); 
});

注意:jQuery加载需要在img前,处理函数需在img后

3. 使用函数处理

// 原生JS解决方案 
function $id(id) { 
 return !id || id.nodeType === 1 ? id : document.getElementById(id); 
} 
function isType(o, t) { 
 return (typeof o).indexOf(t.charAt(0).toLowerCase()) === 0; 
} 
 
// 主要逻辑 
function image(src, cfg) { 
 var img, prop, target; 
 cfg = cfg || (isType(src, 'o') ? src : {}); 
 
 img = $id(src); 
 if (img) { 
 src = cfg.src || img.src; 
 } else { 
 img = document.createElement('img'); 
 src = src || cfg.src; 
 } 
 
 if (!src) { 
 return null; 
 } 
 
 prop = isType(img.naturalWidth,'u') ? 'width' : 'naturalWidth'; 
 img.alt = cfg.alt || img.alt; 
 
 // Add the image and insert if requested (must be on DOM to load or 
 // pull from cache) 
 img.src = src; 
 
 target = $id(cfg.target); 
 if (target) { 
 target.insertBefore(img, $id(cfg.insertBefore) || null); 
 } 
 
 // Loaded? 
 if (img.complete) { 
 if (img[prop]) { 
 if (isType(cfg.success,'f')) { 
 cfg.success.call(img); 
 } 
 } else { 
 if (isType(cfg.failure,'f')) { 
 cfg.failure.call(img); 
 } 
 } 
 } else { 
 if (isType(cfg.success,'f')) { 
 img.onload = cfg.success; 
 } 
 if (isType(cfg.failure,'f')) { 
 img.onerror = cfg.failure; 
 } 
 } 
 
 return img; 
}

以上函数有许多用处:

1. 获取图片信息:图片是否可下载,图片宽高

image('img',{ 
 success : function () { alert(this.width + "-" + this.height); }, 
 failure : function () { alert('image 404!'); }, 
}); 
 
// 验证资源是否下载 
image('images/banner/banner_2.jpg', { 
 success : function () {console.log('sucess')}, 
 failure : function () {console.log('failure')}, 
 target : 'myContainerId', 
 insertBefore : 'someChildOfmyContainerId' 
});

2. 下载并插入图片

var report = $id('report'), 
 callback = { 
 success : function () { 
 report.innerHTML += '<p>Success - ' + this.src + ' ('+this.offsetWidth+'x'+this.offsetHeight+')</p>'; 
 }, 
 failure : function () { 
 report.innerHTML += '<p>Failure - ' + this.src + ' ('+this.offsetWidth+'x'+this.offsetHeight+')</p>'; 
 }, 
 target : 'target' 
 }; 
 
image('img', callback); 
image('images/banner/banner_2.jpg', callback);

以上就是js针对图片加载时出现404问题的解决办法,希望大家有所收获。

Javascript 相关文章推荐
添加到收藏夹代码(兼容几乎所有的浏览器)
Jan 09 Javascript
javascript学习笔记(五)正则表达式
Apr 08 Javascript
最新28个很棒的jQuery 教程
May 28 Javascript
jquery仿百度经验滑动切换浏览效果
Apr 14 Javascript
JQuery显示隐藏页面元素的方法总结
Apr 16 Javascript
D3.js实现折线图的方法详解
Sep 21 Javascript
javascript replace()第二个参数为函数时的参数用法
Dec 26 Javascript
Node.js 使用命令行工具检查更新
Jun 08 Javascript
解决vue-cli3 使用子目录部署问题
Jul 19 Javascript
Vue.js实现表格渲染的方法
Sep 07 Javascript
Angular7中创建组件/自定义指令/管道的方法实例详解
Apr 02 Javascript
如何提升vue.js中大型数据的性能
Jun 21 Javascript
jquery实现的点击翻书效果代码
Nov 04 #Javascript
JS实现获取键盘按下的按键并显示在页面上的方法
Nov 04 #Javascript
JS实现超精简的链接列表在固定区域内滚动效果代码
Nov 04 #Javascript
JS实现网页上随滚动条滚动的层效果代码
Nov 04 #Javascript
jQuery实现带有动画效果的回到顶部和底部代码
Nov 04 #Javascript
JavaScript前端开发之实现二进制读写操作
Nov 04 #Javascript
js实现二级菜单渐隐显示
Nov 03 #Javascript
You might like
php中flush()、ob_flush()、ob_end_flush()的区别介绍
2013/02/17 PHP
Php header()函数语法及使用代码
2013/11/04 PHP
php专用数组排序类ArraySortUtil用法实例
2015/04/03 PHP
php格式化电话号码的方法
2015/04/24 PHP
php实现XSS安全过滤的方法
2015/07/29 PHP
深入讲解PHP的Yii框架中的属性(Property)
2016/03/18 PHP
php中如何执行linux命令详解
2018/11/06 PHP
用js的for循环获取radio选中的值
2013/10/21 Javascript
在Node.js中实现文件复制的方法和实例
2014/06/05 Javascript
jquery插件NProgress.js制作网页加载进度条
2015/06/05 Javascript
javascript函数式编程程序员的工具集
2015/10/11 Javascript
Bootstrap每天必学之工具提示(Tooltip)插件
2016/04/26 Javascript
100行代码理解和分析vue2.0响应式架构
2017/03/09 Javascript
详解VUE的状态控制与延时加载刷新
2017/03/27 Javascript
移动端触屏幻灯片图片切换插件idangerous swiper.js
2017/04/10 Javascript
基于jQuery.i18n实现web前端的国际化
2018/05/04 jQuery
小程序云开发实战小结
2018/10/25 Javascript
JS实现多功能计算器
2020/10/28 Javascript
python开发之for循环操作实例详解
2015/11/12 Python
Python实现二分查找与bisect模块详解
2017/01/13 Python
pycharm访问mysql数据库的方法步骤
2019/06/18 Python
Django模板Templates使用方法详解
2019/07/19 Python
Python的几种主动结束程序方式
2019/11/22 Python
matplotlib 曲线图 和 折线图 plt.plot()实例
2020/04/17 Python
python递归函数用法详解
2020/10/26 Python
Canvas图片分割效果的实现
2019/07/29 HTML / CSS
家长对孩子的评语
2014/04/18 职场文书
考核评语大全
2014/04/29 职场文书
党的群众路线教育实践活动对照检查材料思想汇报(党员篇)
2014/09/25 职场文书
党委领导班子整改方案
2014/09/30 职场文书
闪闪的红星观后感
2015/06/08 职场文书
横空出世观后感
2015/06/09 职场文书
MySQL kill不掉线程的原因
2021/05/07 MySQL
Python anaconda安装库命令详解
2021/10/16 Python
MySQL中IO问题的深入分析与优化
2022/04/02 MySQL
Python函数对象与闭包函数
2022/04/13 Python