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
7K0
举报

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

本文实例讲述了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.2K0
js 图片加载失败处理方法「建议收藏」
Vue.js的图片加载性能优化你可以试试
图片加载优化对于一个网站性能好坏起着至关重要的作用。所以我们使用Vue来操作一波。
Vam的金豆之路
2021/11/30
1.9K0
img图片加载失败的处理
发布者:全栈程序员栈长,转载请注明出处:https://javaforall.cn/145961.html原文链接:https://javaforall.cn
全栈程序员站长
2022/08/29
2.4K0
图片加载失败替换图片解决方案
图片加载失败在不同浏览器表现有差异,比如google可能会一片空白、img的宽高是0*0,ie会在图片位置会出现一个碎片图标,火狐会显示一个边框像这样:
全栈程序员站长
2022/09/05
3K0
图片加载失败替换图片解决方案
实现图片懒加载的三种方式(前端路由懒加载原理)
图片懒加载就是鼠标滑动到哪里,图片加载到哪里。总的来说,一般页面打开,会同时加载页面所有的图片,如果页面的图片请求太多会造成很卡很慢的现象,为了避免这一现象,利用懒加载图片的方法,提高性能(典型:淘宝)
全栈程序员站长
2022/07/31
2.1K0
实现图片懒加载的三种方式(前端路由懒加载原理)
图片加载失败的正确处理[通俗易懂]
对于这样一段代码来讲,如果该图片加载成功,那么界面上会显示图片,如果由于一些原因导致图片加载失败,会出现这样的图标。
全栈程序员站长
2022/08/23
2.6K0
图片加载失败的正确处理[通俗易懂]
OpenHarmony图片加载——ImageKnife
专门为OpenHarmony打造的一款图像加载缓存库,致力于更高效、更轻便、更简单。
小帅聊鸿蒙
2024/09/20
4000
OpenHarmony图片加载——ImageKnife
基于jQuery 常用WEB控件收集
基于Jquery开发的Autocomplete插件。具有易于使用,配置简单,既可以利用Ajax读取数据也可以直接从本地获取数据。
全栈程序员站长
2022/07/05
8.4K0
elementUI el-image图片加载失败解决[通俗易懂]
发布者:全栈程序员栈长,转载请注明出处:https://javaforall.cn/144786.html原文链接:https://javaforall.cn
全栈程序员站长
2022/08/26
5.6K0
elementUI el-image图片加载失败解决[通俗易懂]
【Web技术】1576- 你的图片加载,一点都不酷炫!不信 You Look Look
现代网站中的图片使用量是很大的,在一些门户网站中,还会有一些大尺寸的图片展示,这个时候图片如果加载不顺畅,是很影响用户体验的
pingan8787
2023/02/13
8020
【Web技术】1576- 你的图片加载,一点都不酷炫!不信 You Look Look
Service Worker 图片加载失败处理
1. 拦截图片加载失败 返回默认图片 案例 https://bitsofco.de/handling-broken-images-with-service-worker/ 2. 蓝湖 https://lanhuapp.com/
random_wang
2019/09/11
1.4K0
图片加载失败占位符[通俗易懂]
当网络不佳加载图片时会出现加载失败或者延时加载的情况,此时原本的图片位置会显示空白状态,这造成了不好的用户体验,所以我们需要加一个图片占位符。 有两种方式可以实现:
全栈程序员站长
2022/09/05
3.3K0
img图片加载失败默认图片「建议收藏」
转载于:https://www.cnblogs.com/techliang666/p/8876842.html
全栈程序员站长
2022/09/01
8880
Carson带你学Android:最全面解析图片加载库Glide用法
api也提供了几个常用的动画:比如crossFade() R.anim.item_alpha_in
Carson.Ho
2022/03/24
9510
Carson带你学Android:最全面解析图片加载库Glide用法
vue图片加载失败默认图片[通俗易懂]
1,img是个比较特殊的标签,和video一样具有被替代性,所有当图片加载成功时,原先定义的伪类会失去作用不提示。
全栈程序员站长
2022/09/05
2.5K0
vue图片加载失败默认图片[通俗易懂]
html错误(一) Stack Overflow at line:0 IE下解决方案
一 今天用IE测试发现一个很奇葩的问题:代码没有什么问题,但是在浏览器中会自动弹出一个错误
全栈程序员站长
2022/09/14
5940
html错误(一) Stack Overflow at line:0 IE下解决方案
Android图片加载库:最全面解析Glide用法
前言 上文已经对当今Android主流的图片加载库进行了全面介绍 & 对比 如果你还没阅读,我建议你先移步这里进行查看 今天我们来学习一下其中一个Android主流的图片加载库的使用 - Gl
Carson.Ho
2019/02/22
3.7K0
img图片加载失败?
在工作中经常会使用< img >标签进行图片展示,但是经常有图片加载失败的情况发生(图片地址不存在、图片已经删除等)。
全栈程序员站长
2022/09/05
3.3K0
img图片加载失败?
图片加载失败后显示默认图片
发布者:全栈程序员栈长,转载请注明出处:https://javaforall.cn/139932.html原文链接:https://javaforall.cn
全栈程序员站长
2022/09/03
4K0
图片加载失败后显示默认图片
img图片加载出错处理[通俗易懂]
当在页面显示的时候,万一图片被移动了位置或者丢失的话,将会在页面显示一个带X的图片,很是影响用户的体验。即使使用alt属性给出了”图片XX”的提示信息,也起不了多大作用。 其实,可以这样处理:当图片不存在的时候,会触发onerror事件,我们可以在该事件中做一下补救的工作,比如:
全栈程序员站长
2022/09/17
2.8K0
推荐阅读
相关推荐
js 图片加载失败处理方法「建议收藏」
更多 >
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档