源码网商城,靠谱的源码在线交易网站 我的订单 购物车 帮助

源码网商城

JS实现图片延迟加载并淡入淡出效果的简单方法

  • 时间:2022-12-27 03:50 编辑: 来源: 阅读:
  • 扫一扫,手机访问
摘要:JS实现图片延迟加载并淡入淡出效果的简单方法
话不多说,直接看示例 [b]首先是图片标记的写法[/b]
<img data-src="/images/image.jpg" alt="">
需要将图片的地址放到 [code]data-src [/code]属性里,而[code]src[/code]值不需要,直接将[code]src[/code]属性去掉。 [b]CSS代码[/b] 所有具有[code]data-src[/code]属性的图片,我们将其初始显示状态为不可见,通过透明度来调节:
img {
 opacity: 1;
 transition: opacity 0.3s;
}

img[data-src] {
 opacity: 0;
}
这样写的作用是什么?等当图片加载时,你就能看的效果了。 [b]JavaScript代码[/b] 我们最终会将[code] data-src [/code]属性去掉,换成src属性,但这是图片加载成功后的动作:
[].forEach.call(document.querySelectorAll('img[data-src]'), function(img) {
 img.setAttribute('src', img.getAttribute('data-src'));
 img.onload = function() {
 img.removeAttribute('data-src');
 };
});
相比起其它各种的图片延迟加载技术,这种方法非常的简单,它几乎不要求其它任何条件,可以用在任何地方,使用起来非常灵活。 但是要注意的是,简单有简单的好坏,也会因为简单而不足。它不具有图片图片滚动到可视窗口内再加载的功能。最终使用哪种技术,还是要看场景而定。 以上就是本文的全部内容,希望对大家的工作和学习能有所帮助。
  • 全部评论(0)
联系客服
客服电话:
400-000-3129
微信版

扫一扫进微信版
返回顶部