Loading [MathJax]/jax/output/CommonHTML/config.js
前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >专栏 >htmlimg图片加载失败_js针对图片加载失败的处理方法分析

htmlimg图片加载失败_js针对图片加载失败的处理方法分析

作者头像
全栈程序员站长
发布于 2022-08-22 02:59:47
发布于 2022-08-22 02:59:47
6.8K0
举报

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

本文实例讲述了js针对图片加载失败的处理方法。分享给大家供大家参考,具体如下:

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

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

$(“img”).error(function(){

//当图片加载失败时,你要进行的操作

//$(this).attr(‘src’,’images/no_pic.jpg’);

});

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

HTML 中:

尝试一下

JavaScript 中:

object.οnerrοr=function(){myScript};

尝试一下

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

object.addEventListener(“error”, myScript);

支持的 HTML 标签:

, , ,

另外,当图片加载错误的时候,触发onerror事件,还可使用一下方法进行处理:

①. 隐藏

②. 用默认的图片替换

PS:这里再为大家附上javascript系统自带事件参考表供大家参考查询:

希望本文所述对大家JavaScript程序设计有所帮助。

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

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2022年5月5,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
暂无评论
推荐阅读
编辑精选文章
换一批
js 图片加载失败处理方法「建议收藏」
个人github:https://github.com/qiilee 欢迎follow
全栈程序员站长
2022/09/05
6.1K0
js 图片加载失败处理方法「建议收藏」
img图片加载失败的处理
发布者:全栈程序员栈长,转载请注明出处:https://javaforall.cn/145961.html原文链接:https://javaforall.cn
全栈程序员站长
2022/08/29
2.4K0
图片加载出错后显示默认图片
图片存在则显示yuan.png,图片不存在或者因网络原因将显示 xian.png 若 xian.png 也不存在,则继续触发 onerror,导致死循环,所以建议使用上面的那种方式
全栈程序员站长
2022/09/17
2.2K0
图片加载出错后显示默认图片
图片加载失败后显示默认图片
发布者:全栈程序员栈长,转载请注明出处:https://javaforall.cn/139932.html原文链接:https://javaforall.cn
全栈程序员站长
2022/09/03
3.9K0
图片加载失败后显示默认图片
前端页面图片加载失败显示默认图片
这种写法的好处,可以监听到动态js添加进来的元素,有些人可能会用jq的事件代理delegate或者on(我没有实现,开始以为我代理的不对,后来知道是error事件不支持冒泡),最好先将默认图片预加载:
全栈程序员站长
2022/09/05
5.3K0
img图片加载失败?
在工作中经常会使用< img >标签进行图片展示,但是经常有图片加载失败的情况发生(图片地址不存在、图片已经删除等)。
全栈程序员站长
2022/09/05
3.2K0
img图片加载失败?
Vue图片加载错误、图片加载失败的处理
这个判断只能判断pic是否存在,只有pic=””的情况下,才会显示设置的默认图片,但是如果pic这个字段是有值的呢,并且是一个错误的值,或者一个找不到的404的路径呢?这个时候就要用onerror来检测图片加载错误,加载失败了
全栈程序员站长
2022/09/05
4.1K0
图片加载失败的正确处理[通俗易懂]
对于这样一段代码来讲,如果该图片加载成功,那么界面上会显示图片,如果由于一些原因导致图片加载失败,会出现这样的图标。
全栈程序员站长
2022/08/23
2.6K0
图片加载失败的正确处理[通俗易懂]
img图片加载失败时的处理
当想对图片加载失败时进行特殊处理,可以使用onerror事件,里面为需要执行的代码。 如果由于其他原因导致onerror事件里加载图片时又报错,此时有可能会导致栈溢出而弹框报错,我们只需在inerror里加上一句话即可。
全栈程序员站长
2022/09/05
2K0
图片加载失败替换图片解决方案
图片加载失败在不同浏览器表现有差异,比如google可能会一片空白、img的宽高是0*0,ie会在图片位置会出现一个碎片图标,火狐会显示一个边框像这样:
全栈程序员站长
2022/09/05
2.9K0
图片加载失败替换图片解决方案
解决angularjs图片加载失败
angularjs图片加载失败,本文的angularjs图片加载失败中的angularjs指的是angular2、angular4。
全栈程序员站长
2022/09/02
1.5K0
图片加载失败占位符[通俗易懂]
当网络不佳加载图片时会出现加载失败或者延时加载的情况,此时原本的图片位置会显示空白状态,这造成了不好的用户体验,所以我们需要加一个图片占位符。 有两种方式可以实现:
全栈程序员站长
2022/09/05
3.2K0
vue图片加载失败默认图片[通俗易懂]
1,img是个比较特殊的标签,和video一样具有被替代性,所有当图片加载成功时,原先定义的伪类会失去作用不提示。
全栈程序员站长
2022/09/05
2.4K0
vue图片加载失败默认图片[通俗易懂]
实现图片懒加载的三种方式(前端路由懒加载原理)
图片懒加载就是鼠标滑动到哪里,图片加载到哪里。总的来说,一般页面打开,会同时加载页面所有的图片,如果页面的图片请求太多会造成很卡很慢的现象,为了避免这一现象,利用懒加载图片的方法,提高性能(典型:淘宝)
全栈程序员站长
2022/07/31
1.9K0
实现图片懒加载的三种方式(前端路由懒加载原理)
基于jQuery 常用WEB控件收集
基于Jquery开发的Autocomplete插件。具有易于使用,配置简单,既可以利用Ajax读取数据也可以直接从本地获取数据。
全栈程序员站长
2022/07/05
8.1K0
让Typecho无限滚动加载的方法
据统计,据媒体报道,据各种经验之谈:用户不喜欢点击,更爱滚动!所以,之前挺流行的文章分页没有了,沿用了几百年的“下一页”也被无限load取代。瀑布流和Twitter更是推动了无限load的普及。
泽泽社长
2023/04/17
1.8K0
让Typecho无限滚动加载的方法
img图片加载出错处理[通俗易懂]
当在页面显示的时候,万一图片被移动了位置或者丢失的话,将会在页面显示一个带X的图片,很是影响用户的体验。即使使用alt属性给出了”图片XX”的提示信息,也起不了多大作用。 其实,可以这样处理:当图片不存在的时候,会触发onerror事件,我们可以在该事件中做一下补救的工作,比如:
全栈程序员站长
2022/09/17
2.7K0
Service Worker 图片加载失败处理
1. 拦截图片加载失败 返回默认图片 案例 https://bitsofco.de/handling-broken-images-with-service-worker/ 2. 蓝湖 https://lanhuapp.com/
random_wang
2019/09/11
1.3K0
Android图片加载库:最全面解析Glide用法
前言 上文已经对当今Android主流的图片加载库进行了全面介绍 & 对比 如果你还没阅读,我建议你先移步这里进行查看 今天我们来学习一下其中一个Android主流的图片加载库的使用 - Gl
Carson.Ho
2019/02/22
3.6K0
img图片加载失败默认图片「建议收藏」
转载于:https://www.cnblogs.com/techliang666/p/8876842.html
全栈程序员站长
2022/09/01
8710
相关推荐
js 图片加载失败处理方法「建议收藏」
更多 >
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档