轩枫阁

首页 / Web前端 / 授人以渔 / Javascript / JS针对图片加载及404处理

JS针对图片加载及404处理

前言

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

img标签事件属性

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

img标签常用的事件如下:

onerror:图像加载过程中发生错误时被触发。

onabort:图片加载的时候,用户通过点击停止加载时触发,通常在这里触发一个提示:“图片正在加载”。

onload:当图片加载完成之后触发。

1. 对图片监听onerror事件

HTML

JS

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

2. 使用jQuery监听error

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

3. 使用函数处理

以上函数有许多用处:

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

2. 下载并插入图片

参考:http://web.archive.org/web/20120904060007/http://lucassmith.name/2008/11/is-my-image-loaded.html

本文标题:JS针对图片加载及404处理 - 轩枫阁

转载请务必注明出处,欢迎分享

如果觉得我的文章对您有用,欢迎打赏
赞  赏
赞赏作者 urnotivan
¥ 6.66
换个金额 使用微信扫一扫赞赏
  • 6.66
  • 8.88
  • 16.8
  • 2.33
  • 52.0
  • 20.0
  • 自定义
  • 10.0
116/470
118/470

相关阅读

文章评论

  • 顶一下吧~ 很少见的好文了

  • 这个不错的,一般404页面我都是默认的那种,客户体验应该非常不好。

纸飞机许愿

x

钢琴节奏

请选择弹奏的曲谱

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 1
    • 2

    [返回曲谱列表]

    点击开始录制,可以录制弹奏的曲子