img 图片加载完成前及下载异常时的显示设置小技巧

最新推荐文章于 2024-07-04 16:36:44 发布

SZ_FED

最新推荐文章于 2024-07-04 16:36:44 发布

阅读量823

点赞数

文章标签： javascript

本文链接：https://blog.csdn.net/llq886/article/details/105430704

版权

本文介绍了在JavaScript中处理图片加载失败和加载过程的回调函数，包括在Vue和React框架中的不同写法。同时推荐了Vant框架的Lazyload组件，它能有效地管理图片的初始、正常和异常状态，对于图片加载优化有很好的效果。

摘要由CSDN通过智能技术生成

Image 图片资源加载失败的回调函数是onerror,图片资源加载中的回调函数是onload；

使用前端框架来调用这些函数时函数名有细微的差别：

vue 项目中 img 标签资源加载失败时的监听函数写法为 @error，资源加载中的回调函数为@load， 去掉了 on;

//template中
<img src="../assets/merchantOutletLogo.png" @error="showDefaultLogo" @load="showDefaultLogo"/>

//script中，引入默认图片
const defaultLogo

最低0.47元/天解锁文章

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

SZ_FED

关注关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

微信小程序开发中的网络图片加载和优化处理

m0_75244442的博客

07-16

272

在开发过程中，我们经常会遇到加载网络图片的需求，并且为了提升用户体验，我们也需要对图片进行优化处理，以减少加载时间和网络流量。网络图片加载和优化处理是微信小程序开发中的重要内容，通过合理使用图片加载技巧和优化手段，可以提升用户体验，减少网络流量消耗。有时候图片加载较大，会耗费一定的时间，为了提升用户体验，我们可以在图片加载过程中显示一个加载提示。方法将异步获取图片的信息，并在success回调函数中返回图片的宽度和高度。在实际开发中，我们经常需要获取网络图片的尺寸来调整图片的展示方式。属性设置图片的质量。

最新源码Glide4.12框架之加载图片流程源码分析

HYM BLOG

12-23

2102

一、前言 Android图片加载框架，在android应用开发中是一个常见的话题。在12、13年的时候我记得可能用的最多的是XUtils的一套框架（更早之前叫aFinal框架），这个框架中提供imageUtils用于在android应用的开发中完成远程图片的加载。再后来呢，有Picasso、Fresco、Glide。而这几年的开发经验来看，Glide最为流行。不信，可以查看github上项目地址，分别对比对比watch数、fork数、star数，就能确定Glide确实最为流行。如何对图片框架技术进行选型？

参与评论您还未登录，请先登录后发表或查看评论

微信小程序image加载成功前显示默认占位图

weixin_34174422的博客

09-28

3163

在微信小程序中，我们使用Image组件来展示图片，图片源可以是本地资源，也可以是服务器资源。但是为了内容的动态展示，我们绝大多数情况下，会使用服务器资源来展现作为image的图片源。既然是服务器资源，那么就需要依赖于网络的快慢，如果在网络慢的情况下，image加载图片的过程可能会非常慢，所以在加载图片的过程中，如果不做处理，会出现一片空白的情况，直到图片加载完成，这是非常差的用户体验。为了提高用...

图片加载成功后显示图片

Tizzy_Joel的专栏

02-06

1621

要导入的js： var HTMLElement=HTMLElement?HTMLElement:function HTMLElement(){ }; HTMLElement.prototype.__defineGetter__=HTMLElement.prototype.__defineGetter__?HTMLElement.prototype.__defineGetter

＜img/＞多个图片加载回显失败问题解决

热门推荐

daozhongyang的专栏

05-08

1万+

使用canvas API 内置的几个简单命令可以轻松地为canvas 添加图片内容, 应当注意: 必须等到图片完全加载后才能对其进行操作，浏览器通常会在页面脚本执行的同时异步加载图片。如果试图在图片未完全加载之前就将

vue项目中使用Js判断图片是否加载完所有图片加载完成前展示Loading效果

蒲公英芽的博客

11-14

5769

vue项目中使用Js判断图片是否加载完所有图片加载完成前展示Loading效果。用户创建自己的页面，给创建好的内容页面增加皮肤效果。选择某一皮肤后，当该皮肤中的所有图片都加载完后，再展示皮肤效果；加载图片的时候展示loading效果。

python图片指定区域替换img.paste函数的使用

09-17

### Python 图片指定区域替换：`img.paste` 函数详解在图像处理领域，Python 提供了强大的库——PIL（Python Imaging Library），它可以让开发者轻松地进行图像的读取、显示、编辑等操作。其中，`img.paste` 函数...

解决MATLAB字体显示异常：常见问题及高效解决方案

[解决MATLAB字体显示异常：常见问题及高效解决方案](https://img-blog.csdnimg.cn/direct/4dea907a56c74f5ca68ebad0b8453874.png) # 1. MATLAB字体显示异常概述 MATLAB是一种广泛用于科学计算和数据分析的编程语言...

img-loaded:加载图像后运行回调函数

06-23

加载 img 加载图像后调用回调。安装使用： component install staygrimm/img-loaded 使用： var loaded = require ( 'staygrimm/img-loaded' ) ; 使用： npm install img-loaded 用法加载（图像，回调） image可以是元素、css 选择器、节点列表或数组。请注意，如果将多个图像传递给loaded则将为每个图像返回callback 。 var loaded = require ( 'img-loaded' ) ; var images = '.hidden-image' ; loaded ( images , function ( err , img ) { // img is loaded! } ) ; 测试 make test 类似的库这些人首

img的complete和onload

weixin_34062329的博客

07-02

1444

HTML DOM complete 属性定义和用法: complete 属性可返回浏览器是否已完成对图像的加载。如果加载完成，则返回 true，否则返回 fasle。语法: imageObject.complete Image onload 事件定义和用法: onload 事件在图片加载完成后立即执行。语法 onload="JavaScri...

怎么在图片加载成功之前用另一个图片代替

less_cold的博客

11-07

2827

很多时候，在服务器上图片有的时候会太大，需要一个小一点的图片来过渡一下。我想到使用一个onload属性 onload的意思是在这个标签加载完成时，执行onload中的程序 html=html+''+eval(data)[0][2][i]+''; 第一个img是加载成功之前的那张图，第二个img是需要加载的图片，这个img的onload属性，当加载成功时，显示第二张图，隐

【干货】＜img/＞加载成功||失败

静如处子，动如脱兔！！！

10-31

211

【代码】【干货】＜img/＞加载成功||失败。

接口返回慢图片加载失败问题

大左的博客

07-07

1031

该图片是通过后端接口返回picUrl来给img的src赋值但是后端接口响应较慢导致html加载完 data也没赋到值图片加载裂开。解决办法：img标签添加@error事件获取错误信息回调。给img的src重新赋值直到赋上为止。

使用JS监控图片的加载

DF11G_0001的博客

03-08

1282

使用Image对象，并为其设置回调函数。 this.myImg = new Image() this.myImg.onload = (() => { // 图片加载成功后的回调 }) this.myImg.src = // 图片地址篇幅过短是什么鬼？laji CSDN

漫谈JSONP以及<img>的onLoad和onError事件

会开花的树

02-04

1651

利用jsonp进行跨域已经是老生常谈了。主要原理是浏览器解析标签的时候，会用script的src属性去发一个网络请求，并将response的东西当做javascript去执行。而浏览器对js脚本并没有做跨域限制。一个简单的jsonp例子 const url = 'http://www.xxx.com/api/someThing?query=WITH_SOME_DATA&callback=

img标签怎么设置加载失败时显示的图片

05-24

在上面的示例中，当图片加载失败时，会触发 `onerror` 事件，然后将 `src` 属性设置为 `default.jpg`，这样就会显示默认的图片。注意，为了避免出现死循环，需要在 `onerror` 事件中将 `onerror` 属性设为 `null`，...