解决js图片加载时出现404的问题
(编辑:jimmy 日期: 2025/7/1 浏览:3 次 )
运营网站久了之后,无法避免会出现图片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="/UploadFiles/2021-04-02/someimage.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 "color: #800000">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问题的解决办法,希望大家有所收获。
下一篇:jquery实现的点击翻书效果代码
荣耀猎人回归!七大亮点看懂不只是轻薄本,更是游戏本的MagicBook Pro 16.
人们对于笔记本电脑有一个固有印象:要么轻薄但性能一般,要么性能强劲但笨重臃肿。然而,今年荣耀新推出的MagicBook Pro 16刷新了人们的认知——发布会上,荣耀宣布猎人游戏本正式回归,称其继承了荣耀 HUNTER 基因,并自信地为其打出“轻薄本,更是游戏本”的口号。
众所周知,寻求轻薄本的用户普遍更看重便携性、外观造型、静谧性和打字办公等用机体验,而寻求游戏本的用户则普遍更看重硬件配置、性能释放等硬核指标。把两个看似难以相干的产品融合到一起,我们不禁对它产生了强烈的好奇:作为代表荣耀猎人游戏本的跨界新物种,它究竟做了哪些平衡以兼顾不同人群的各类需求呢?
人们对于笔记本电脑有一个固有印象:要么轻薄但性能一般,要么性能强劲但笨重臃肿。然而,今年荣耀新推出的MagicBook Pro 16刷新了人们的认知——发布会上,荣耀宣布猎人游戏本正式回归,称其继承了荣耀 HUNTER 基因,并自信地为其打出“轻薄本,更是游戏本”的口号。
众所周知,寻求轻薄本的用户普遍更看重便携性、外观造型、静谧性和打字办公等用机体验,而寻求游戏本的用户则普遍更看重硬件配置、性能释放等硬核指标。把两个看似难以相干的产品融合到一起,我们不禁对它产生了强烈的好奇:作为代表荣耀猎人游戏本的跨界新物种,它究竟做了哪些平衡以兼顾不同人群的各类需求呢?