解决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 相关文章推荐
ASP.NET jQuery 实例17 通过使用jQuery validation插件校验ListBox
Feb 03 Javascript
jquery自定义属性(类型/属性值)
May 21 Javascript
三种方式获取XMLHttpRequest对象
Apr 21 Javascript
javascript动态添加删除tabs标签的方法
Jul 06 Javascript
jQuery实现一个简单的轮播图
Feb 19 Javascript
Node.js 8 中的 util.promisify的详解
Jun 12 Javascript
JavaScript基本语法_动力节点Java学院整理
Jun 26 Javascript
Node.js+jade+mongodb+mongoose实现爬虫分离入库与生成静态文件的方法
Sep 20 Javascript
Vuex 使用及简单实例(计数器)
Aug 29 Javascript
vue实现下拉加载其实没那么复杂
Aug 13 Javascript
JavaScript实现手机号码 3-4-4格式并控制新增和删除时光标的位置
Jun 02 Javascript
使用 Github Actions 自动部署 Angular 应用到 Github Pages的方法
Jul 20 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 图片上传类代码
2009/07/17 PHP
php中并发读写文件冲突的解决方案
2013/10/25 PHP
php获取CSS文件中图片地址并下载到本地的方法
2014/12/02 PHP
PHP文件及文件夹操作之创建、删除、移动、复制
2016/07/13 PHP
PHP实现可添加水印与生成缩略图的图片处理工具类
2018/01/16 PHP
Jquery 常用方法经典总结
2010/01/28 Javascript
struts2+jquery+json实现异步加载数据(自写)
2013/06/24 Javascript
js字母大小写转换实现方法总结
2013/11/13 Javascript
js的[defer]和[async]属性
2014/11/24 Javascript
Js 正则表达式知识汇总
2014/12/02 Javascript
IE及IE6浏览器中判断JS文件加载成功失败的方法
2015/02/18 Javascript
jQuery中cookie插件用法实例分析
2015/12/04 Javascript
分享javascript计算时间差的示例代码
2020/03/19 Javascript
用Vue-cli搭建的项目中引入css报错的原因分析
2017/07/20 Javascript
基于js的变量提升和函数提升(详解)
2017/09/17 Javascript
Node Puppeteer图像识别实现百度指数爬虫的示例
2018/02/22 Javascript
解决淘宝cnpm 安装后cnpm不是内部或外部命令的问题
2018/05/17 Javascript
vue-cli 构建骨架屏的方法示例
2018/11/08 Javascript
VUE+Element环境搭建与安装的方法步骤
2019/01/24 Javascript
vue实现户籍管理系统
2020/05/29 Javascript
[00:43]FTP典藏礼包 DOTA2三大英雄霸气新套装
2014/03/21 DOTA
[01:15:45]DOTA2上海特级锦标赛B组小组赛#1 Alliance VS Spirit第一局
2016/02/26 DOTA
[01:02:06]LGD vs Mineski Supermajor 胜者组 BO3 第二场 6.5
2018/06/06 DOTA
Python字符串的encode与decode研究心得乱码问题解决方法
2009/03/23 Python
在Python中使用判断语句和循环的教程
2015/04/25 Python
Python使用sorted对字典的key或value排序
2018/11/15 Python
python实现发送form-data数据的方法详解
2019/09/27 Python
Python多进程编程multiprocessing代码实例
2020/03/12 Python
利用pyecharts读取csv并进行数据统计可视化的实现
2020/04/17 Python
英国票务网站:Ticketmaster英国
2018/08/27 全球购物
三好学生演讲稿范文
2014/04/26 职场文书
求职简历自我评价2015
2015/03/10 职场文书
导游词之江苏同里古镇
2019/11/18 职场文书
PyTorch 如何设置随机数种子使结果可复现
2021/05/12 Python
Django操作cookie的实现
2021/05/26 Python
Nginx报错104:Connection reset by peer问题的解决及分析
2022/07/23 Servers