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

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>

js 图片加载失败处理方法的更多相关文章

  1. 微信小程序 图片加载失败处理方法

    微信小程序 官方文档对image 媒体组件加载失败 没有太多的解释,使用中出现了几个小问题,今天抽空记录一下 WXML: <image class="userinfo-avatar&q ...

  2. JS图片加载失败用默认图片代替

    1.onerror 事件会在文档或图像加载过程中发生错误时被触发. 当图片不存在时,将触发onerror,onerror 中img为 指定的默认图片. 图片存在则显示正常图片,图片不存在将显示默认. ...

  3. JS图片加载失败显示默认图片

    代码如下: <div id='photo<%# Container.DataItemIndex+1%>' style="position: absolute; displa ...

  4. js img图片加载失败,重新加载+断网检查

    我们常常会遇到img加载图片的时候因为网络问题或者图片过大导致图片加载失败的问题,页面就因为这张蹦掉的图变得不美观.所以我们需要图片加载失败的时候重新加载图片,前端图片加载优化 //js方法定义 fu ...

  5. 伪元素黑魔法:一个替代onerror解决图片加载失败的方案

    问题的引出是这样的,在一个项目中有大量的页面主体是table做数据展示,所以就封装了一个table的组件,提供动态渲染的方案.有个问题是数据类型中有图片,对于图片的加载失败我们需要做容错.一般我们的思 ...

  6. css背景图片加载失败,页面部分图标无法显示

    1.问题表现:首屏缺失部分图标.点击按钮切换为激活状态时,部分按钮的激活态图标无法显示. 2.问题原因:网络极差,断断续续,点击时添加class:active变为激活态, active.png这张图片 ...

  7. AngularJS中如果ng-src 图片加载失败怎么办

    我们知道AngularJS加载图片的方法是用技术分享加ng-src标签,例如: <img ng-src="{{currentUrl}}"/> 其中currentUrl为 ...

  8. js图片加载效果(延迟加载+瀑布流加载)

    概述 两种图片加载的效果:一种是遇到图片较多时,带读条效果的加载提示:另一种是根据滑块的位置进行预加载,用户不察觉的情况下,实现瀑布流的加载效果 详细 代码下载:http://www.demodash ...

  9. WebForm、MVC图片加载失败处理

    还是那个该死的WebFrom项目,部分功能替换为MVC后感觉好多了,但是WebForm.MVC都有图片加载失败时显示提示图片的需求,并且统一在js中处理.问题来了,js中图片路径怎么处理呢?现场有可能 ...

随机推荐

  1. 取得当前页面的value值问题

    取得当前输入input的值 <body>    <form action="">        <input type="text" ...

  2. 【转】 通过VMLibrary在client partition上安装AIX全程实录

    现场实录,应该对新手有所帮助,因为本人就是新手...最近一段时间跟Linux无缘,都是在和PowerVM打交道,博文更新慢,不赖我,哈哈本文参考链接:AIX Migration with File-B ...

  3. QBuffer简单操作(被看做一个标准的可随机访问的文件,支持信号)

    Qt中通过QBuffer类我们可以使用io的方式访问.操作QByteArray中的内容.此时,QByteArray被看做一个标准的可随机访问的文件.例如: QBuffer buffer; char c ...

  4. Android系统移植与调试之------->如何修改Android手机显示的4G信号强度的格子数

    在修改显示的信号强度之前,先了解一下什么是dB,什么是dBm? 1.dB dB是一个表征相对值的值,纯粹的比值,只表示两个量的相对大小关系,没有单位,当考虑甲的功率相比于乙功率大或小多少个dB时, 按 ...

  5. 图的遍历:DFS和BFS

    图的遍历一般由两者方式:深度优先搜索(DFS),广度优先搜索(BFS),深度优先就是先访问完最深层次的数据元素,而BFS其实就是层次遍历,每一层每一层的遍历. 1.深度优先搜索(DFS) 我一贯习惯有 ...

  6. Axure快捷键

    基本快捷键: 打开:Ctrl + O 新建:Ctrl + N 保存:Ctrl + S 退出:Alt + F4 打印:Ctrl + P 查找:Ctrl + F 替换:Ctrl + H 复制:Ctrl + ...

  7. 剑指offer 面试37题

    面试37题: 题:序列化二叉树 题目:请实现两个函数,分别用来序列化和反序列化二叉树 解题思路:首先来看二叉树的序列化,二叉树的序列化就是采用前序遍历二叉树输出节点,再碰到左子节点或者右子节点为Non ...

  8. sql server分区

    1. 创建分区 分区步骤:1.创建分区函数  2.创建分区架构 3.创建分区索引(聚集)   --1. 创建分区函数 DECLARE @dt datetime SET @dt = '20030901' ...

  9. 异常:System.Runtime.InteropServices.Marshal.GetTypeFromCLSID(System.Guid)

    异常:System.Runtime.InteropServices.Marshal.GetTypeFromCLSID(System.Guid) 原因:该引用所需.NET Framework版本为4.5 ...

  10. iframe 跨域请求

    iframe.contentWindow 兼容各个浏览器,可取得子窗口的 window 对象. iframe.contentDocument Firefox 支持,> ie8 的ie支持.可取得 ...