js 图片加载失败处理方法「建议收藏」

js 图片加载失败处理方法「建议收藏」个人github:https://github.com/qiilee 欢迎follow在项目中不可避免会用到图片,尤其是列表,有时候图片会加载失败;这样就会显示一个很难看的坏图片缩略图;下面介绍两种方法,解决这个问题:1、如果在你的项目中有引入jQuery插件,你可以使用error([[data],fn])这个函数;$("img").error(function(){  //当图…

大家好,又见面了,我是你们的朋友全栈君。

个人github:https://github.com/qiilee  欢迎follow

在项目中不可避免会用到图片,尤其是列表,有时候图片会加载失败;这样就会显示一个很难看的坏图片缩略图;下面介绍两种方法,解决这个问题:

1、如果在你的项目中有引入jQuery插件,你可以使用error([[data],fn])这个函数;

$("img").error(function(){
  //当图片加载失败时,你要进行的操作
  //$(this).attr('src','images/no_pic.jpg');
});

2、如果项目中没有jQuery这样的插件,可以使用HTML的DOM事件onerror事件处理;

复制代码

HTML 中:
  <element onerror="myScript">尝试一下

JavaScript 中:
  object.onerror=function(){myScript};尝试一下

JavaScript 中, 使用 addEventListener() 方法:(注意: Internet Explorer 8 及更早 IE 版本不支持 addEventListener() 方法。)
  object.addEventListener("error", myScript);

支持的 HTML 标签: <img>, <input type="image">, <object>, <script>, <style>
版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-站长,转载请注明出处:https://javaforall.net/136993.html原文链接:https://javaforall.net

赞 (0)
全栈程序员-站长的头像全栈程序员-站长


相关推荐

  • 软件版本号规范与命名原则是什么_版本号格式

    软件版本号规范与命名原则是什么_版本号格式1.软件版本阶段说明*Alpha版:此版本表示该软件在此阶段主要是以实现软件功能为主,通常只在软件开发者内部交流,一般而言,该版本软件的Bug较多,需要继续修改。*Beta版:该版本相对于α版已有了很大的改进,消除了严重的错误,但还是存在着一些缺陷,需要经过多次测试来进一步消除,此版本主要的修改对像是软件的UI。*RC版:该版本已经相当成熟了,基本上不存在导致错误的B

    2022年9月10日
  • Microsoft Platform SDK Febrary 2003下载(更新VC6的SDK)

    Microsoft Platform SDK Febrary 2003下载(更新VC6的SDK)http://www.x86pro.com/article/sdk-update-for-vc6VC6自带的SDK实在太旧了, 因此很多人抱怨,有很多网上下载的代码在VC6中无法编译. 所以我们需要更新一下SDK,但是不能太新,因为太新可能不支持VC6. 支持VC++6.0的SDK,就只有2003年2月的那版了. 更新SDK后,你的VC6会重新焕发生机. 另外,如果再安装个VisualAs

    2022年5月4日
  • 比较列存储索引与行索引

    比较列存储索引与行索引

    2021年11月24日
  • 安装Wamp后 Apache无法启动的解决方法

    安装Wamp后 Apache无法启动的解决方法

    2021年9月20日
  • 【Unity】入门级Unity安装教程

    【Unity】入门级Unity安装教程【Unity】入门级Unity安装教程这是一篇面向对unity感兴趣,想要学习unity,但是还处于入门阶段的小伙伴的超详细unity安装教程。因为是面向入门的小伙伴,所以文章写的有点长,还配有许多图片,这样才能更详细的介绍安装流程。但是不必担心太长看起来太费劲,各位只要照着教程一步步来就可以了。跟着这章博文走,最终你的电脑一定能张开双臂,成功拥抱unity。那么,现在进入正题吧!1.进入官网unity的官网链接:unity.cn看清楚咯,是unity.cn不是.com什么的。官网界面如下然后一

    2022年6月27日
  • django常见问题_二级报错了怎么办

    django常见问题_二级报错了怎么办报错情况Django使用makemigrations做数据迁移的时候报如下错误File"/Users/jkc/.virtualenvs/django_env/lib/python3.7

    2022年7月31日

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

关注全栈程序员社区公众号