先显示默认图片·，等到应该显示的图片加载完成之后再显示加载之后的图片

最新推荐文章于 2022-11-05 20:54:47 发布
最新推荐文章于 2022-11-05 20:54:47 发布
阅读量5.6k 收藏
点赞数
分类专栏： 显示默认图片，img的onload事件
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/ma_yajie/article/details/73201105
版权

我用的是字体图标完成的



先显示字体图标，用onload事件监听图片的加载。当图片加载完成之后显示图片，去掉默认图。

不知道大家都是怎么做的呢，我觉得应该可以有更好的解决办法

阿璇s
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
图片的预加载, 图片替换等操作
tyust512的专栏
09-09 626
目的如果一个img的src需要从一个url转换到另一个url的话,它会再发出一个http请求去下载图片. 但是如果我们提前在js中下载缓存好这个图片的话,他会直接从缓存中获取,并不需要等待请求回返的过程,这样就提高了流畅性. 一个图片转换到另一个图片的话源码网上说有三种方式实现预加载. 我们只需要研究明白一个即可, 即可以采用js的image对象, 对它提前进行缓存批量缓存图片我们提前定义函数<
图片懒加载文件jquery插件库EasyLazyload
10-11
图片懒加载是一种优化网页性能的技术，它在网页加载时并不会一次性加载所有图片，而是等到用户滚动页面，即将看到这些图片时才开始加载。这样可以显著减少初始页面加载时间，提高用户体验，特别是对于拥有大量图片的...
img实现图片加载前默认图片，加载时替换真实图片，加载失败时替换加载失败图片
又菜又爱玩
11-21 5996
img加载前，加载成功，加载失败时分别显示不同的图片
图片加载完成再执行事件
Y15005449875的博客
11-16 328
//图片加载function load(imgSrc,callback) { 　　var imgs = []; 　　var c = 0; 　　for (var i = 0; i < imgSrc.length; i++) { 　　　　imgs[i] = new Image(); 　　　　imgs[i].src = imgSrc[i]; ...
图片预加载（等图片加载完了再展示页面）
catherine的博客
01-15 2316
<template> <div class="home" v-if="finished"> <img :src="head" /> <div class="tab-box" ref="tabBG" :style="tabImage"> <div class="tab tab1" @c...
页面有一组图片实现当一张图片加载完后显示下一张图片
JackieDYH的博客
11-05 402
页面有一组图片实现当一张图片加载完后显示下一张图片。
浅谈vue中使用图片懒加载vue-lazyload插件详细指南
11-27
`vue-lazyload`是一个专门针对Vue.js设计的图片懒加载插件，它的主要作用是在图片实际进入视口之前，不进行网络请求，而是先显示一个预设的占位符，等到图片即将进入用户的可视区域时，再进行加载。这样可以显著减少...
jQuery选项卡切换图片异步加载代码.zip
07-04
默认情况下，只有当前选中的选项卡内的图片会被加载，其他未选中的图片则在用户切换到对应选项卡时异步加载，从而节省了初次页面加载的时间。 异步加载（Asynchronous Loading）是关键所在，它意味着图片不会阻塞...
jQuery拖拽图片上传表单代码
07-24
在本文中，我们将深入探讨如何使用jQuery和layui框架来实现一个功能完备的图片上传和表单验证功能。jQuery是一款广泛使用的JavaScript库，它简化了HTML文档遍历、事件处理、动画以及Ajax交互。layui则是一个轻量级的...
Android中图片的三级缓存机制
09-01
// 显示默认图片 imageView.setImageResource(R.mipmap.ic_launcher); } } } } } // 其他辅助方法如计算内存缓存大小、从磁盘读取图片、从网络下载图片、保存图片到磁盘等 } ``` 在上述代码中，`init()`...
图片先垫底图，加载出来以后替换真图的方法
MaRain
07-26 2065
<div class="content"> <div class="content_show"><img class="p0" data-imgtype="0621000400744002" data-share="" src="https://www.baidu.com/img/computer_pc_f9e71b7cee2d086842457387be642f5e.gif" al
html5实例异步图片加载,TextView显示Html中图片，默认图片点击后异步加载问题
weixin_33245246的博客
06-04 126
TextView显示Html中图片，默认图片点击后异步加载问题。问题是点击后异步加载图片成功，但是无法更新UI界面，就是把默认图片更换为加载后的图片异步加载完成后更新UI操如下：@OverrideprotectedvoidonPostExecute(Drawableresult){super.onPostExecute(result);if(result!=null){drawab...
微信小程序 图片加载失败展示默认图片、binderror
glorious_future的博客
02-27 1178
图片加载失败，不会有提示，只是空白的一块，用户体验很不好。所以要弄一个默认的提示图片来展示 本打算在src里面写两个变量名，中间写个 ||，但是尝试了之后是行不通的，即便第一个加载失败了，也不会展示第二个 <!--错误展示--> <img src="{{image1||image2}}" alt=""> 后来总结了两个方法 在image外面再嵌套一层，给外层设置背景图片，如果image加载失败了就能直接展示外层的背景图了 <view class="image_wrap.
滚屏到相应位置才加载图片
hddfuuh的博客
02-25 302
滚屏到相应位置才加载图片
图片一张张按顺序加载显示问题
Moreyi的专栏
04-14 1571
问题：      使用AsyncTask进行异步加载图片，一般默认线程池里线程个数是cpucount*2+1个；      但是总是一张张按顺序加载。。。。老大不喜欢  然后就网上狂搜解决方案。。。            解决方法：此博客解决我遇到的问题，非常感谢。。。。      然后我就把原来的：task.execute();改成task.executeOnExecutor(Asyn
如何在背景图片加载完成之后显示页面内容
weixin_34199405的博客
11-16 645
首先后去后端数据，看看需要加载什么图片，共几个图片 for (var i = 0; i < that.vClassList.length; i++) { if(that.vClassList[i].msgTypeCode=='18'){ that...
图片不能显示或者未加载完成时候设置默认加载图片
weixin_33939380的博客
06-15 1823
一般做网页的时候都要设置默认加载图片，这样就可以在图片无法显示或者是图片没有加载完成的时候显示默认图片代替， 这样的话可以让页面没有那么难看，总结了两种方法来实现默认图片的显示： 1：只用onerror事件 　　　　$("img").one("error", function(e){ $(this).attr("src", "toyo_default.p...
H5——监听页面图片加载完后，放开loading页面
weixin_45629623的博客
05-27 1103
思路： 给那些图片设置data-src=‘图片地址’属性 代替 src。然后写个公共文件处理逻辑：获取img标签的dom，把data-src的值赋给src，用onload方法判断图片加载完没。当所有图片都onload了。就可以放开loading了。 <template> <div> 页面样式自己写， <slot></slot> //记得带这个 </div> </template> <script> e
浅谈判断图片是否加载完成的方法
筱葭的博客
03-08 6521
1、onload事件 loading... document.getElementsByTagName("img")[0].onload =function() { document.getElementsByTagName("p")[0].innerHTML ='加载完成！'; } 2、complete属性
img 当图片加载失败时显示默认图片
最新发布
06-10
可以使用以下代码来实现： ``` ``` 这里，`src` 属性指定了图片的路径，如果图片加载失败，`onerror` 事件会触发，将 `src` 属性赋值为默认图片路径，即显示默认图片。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值