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

原创于 2016-11-07 20:12:39 发布 · 2.8k 阅读

1 ·

CC 4.0 BY-SA版权

本文介绍了一种使用HTML的onload属性实现图片懒加载的方法。通过展示两个叠加的img标签，先显示一张较小的预加载图片，待实际图片加载完成后自动切换显示。此技术有助于优化网页加载速度和用户体验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

很多时候，在服务器上图片有的时候会太大，需要一个小一点的图片来过渡一下。

我想到使用一个onload属性

onload的意思是在这个标签加载完成时，执行onload中的程序

html=html+'<li><img src="img/jiazai.gif" id="loading'+eval(data)[0][3][i]+'" style="height:200px;width:200px"><img id="'+eval(data)[0][3][i]+'"src="picture/'+eval(data)[0][0][i]+'.png" onload="$("#'+eval(data)[0][3][i]+'").show();$("#loading'+eval(data)[0][3][i]+'").hide();" style="display:none;height:200px;width:200px" onclick="imgShow("#outerdiv","#innerdiv","#bigimg","#'+eval(data)[0][3][i]+'")"/><p>'+eval(data)[0][2][i]+'</p></li>';

第一个img是加载成功之前的那张图，第二个img是需要加载的图片，这个img的onload属性，

当加载成功时，显示第二张图，隐藏第一张图

一些loading图片的网址：

http://www.lanrentuku.com/gif/a/loading.html