js 图片加载失败处理方法

个人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>

js 图片加载失败处理方法相关推荐

小程序图片加载失败binderror方法处理
场景:我们在小程序项目中的一个图片列表,当某些图片加载失败后,直接显示空白,这样用户体验不好,为了解决当图片加载失败,我们给一个默认图片代替,参考官方给的图片加载失败的处理方法:binderror c ...
图片加载失败处理方法
当图片加载错误的时候,触发onerror事件: 隐藏 <img src="" onerror="this.style.display = 'none' " ...
小程序不能加载服务器上缩略图,微信小程序图片加载失败处理方法
将页面打印成excel 在servlet中调用 try { File fileWrite = new File("D:/Write.xls"); fileWrite.createN ...
js img图片加载失败，重新加载+断网检查
我们常常会遇到img加载图片的时候因为网络问题或者图片过大导致图片加载失败的问题,页面就因为这张蹦掉的图变得不美观.所以我们需要图片加载失败的时候重新加载图片 //js方法定义 function re ...
vue本地项目配置图片加载失败_vue图片加载失败时用默认图片替换的方法
vue图片加载失败时用默认图片替换的方法前言本文主要给大家介绍的关于vue实现图片加载失败时用默认图片替换的相关内容,分享出来供大家参考学习,下面话不多说了,来一起看看详细的介绍吧方法如下原理 ...
js img图片加载失败，重新加载+断网检查 1
我们常常会遇到img加载图片的时候因为网络问题或者图片过大导致图片加载失败的问题,页面就因为这张蹦掉的图变得不美观.所以我们需要图片加载失败的时候重新加载图片,前端图片加载优化 //js方法定义 fu ...
htmlimg图片加载失败_js针对图片加载失败的处理方法分析
本文实例讲述了js针对图片加载失败的处理方法.分享给大家供大家参考,具体如下: 在项目中不可避免会用到图片,尤其是列表,有时候图片会加载失败:这样就会显示一个很难看的坏图片缩略图:下面介绍两种方法,解 ...
vue解决图片加载失败显示默认图片的方法
在项目中经常会遇到图片加载失败需要显示默认图片的场景,那么如何在图片src资源加载失败显示出默认的图片呢? 方法一:onerror <img src="原来要加载的资源" o ...
ionic开发——图片加载失败或不存在时显示提示图片的解决方法
当图片加载失败或者不存在的时候,我们需要一张提示图片来代替他.用判断就太麻烦了,img有自己的方法onerror , 当找不到图片的时候就会执行onerror里面的代码例如: <img src ...

js 图片加载失败处理方法

js 图片加载失败处理方法相关推荐

最新文章

热门文章