JS实现图片延迟加载并淡入淡出效果的简单方法
更新时间：2016年08月25日 09:21:15 投稿：daisy
我们大家都知道，对于一个网站最占用带宽，最影响页面显示速度的东西就是图片。图片是很重要的，作为一个站长我们是千方百计的使用各种技巧来优化图片，但其实有一种简单的方法，只需要几行代码就能达到这种效果。同时还附加一种淡入淡出的显示效果，下面一起来看看。
话不多说，直接看示例
首先是图片标记的写法
<img data-src="/images/image.jpg" alt="">
需要将图片的地址放到 data-src 属性里，而src值不需要，直接将src属性去掉。
CSS代码
所有具有data-src属性的图片，我们将其初始显示状态为不可见，通过透明度来调节：
img {
opacity: 1;
transition: opacity 0.3s;
}
img[data-src] {
opacity: 0;
}
这样写的作用是什么？等当图片加载时，你就能看的效果了。
JavaScript代码
我们最终会将 data-src 属性去掉，换成src属性，但这是图片加载成功后的动作：
[].forEach.call(document.querySelectorAll('img[data-src]'), function(img) {
img.setAttribute('src', img.getAttribute('data-src'));
img.onload = function() {
img.removeAttribute('data-src');
};
});
相比起其它各种的图片延迟加载技术，这种方法非常的简单，它几乎不要求其它任何条件，可以用在任何地方，使用起来非常灵活。
但是要注意的是，简单有简单的好坏，也会因为简单而不足。它不具有图片图片滚动到可视窗口内再加载的功能。最终使用哪种技术，还是要看场景而定。
以上就是本文的全部内容，希望对大家的工作和学习能有所帮助。
相关文章
在JavaScript的ES6版本中,引入了WeakMap和WeakSet这两种新的数据结构,与Map和Set相比,它们有一些特殊的特点和用途,使它们在处理内存泄漏问题、管理对象私有数据、处理对象的唯一性等场景中有显著的优势,本文将深入探讨WeakMap和WeakSet的特性和用途,一起看看吧2023-12-12
今天突然想起做一个当鼠标经过<a/>时，会发出声音2010-05-05
这篇文章主要为大家详细介绍了第二篇Javascript动画效果,具有一定的参考价值，感兴趣的小伙伴们可以参考一下2016-10-10
这篇文章主要为大家详细介绍了微信小程序多项选择器checkbox，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-07-07
这篇文章主要介绍了iframe如何调用父页面函数，下面有个不错的示例，大家可以参考下2014-07-07
用js形成页面的一种遮罩效果，选择想要进行遮罩的窗口，在这里想要遮罩的是一个iframe窗口，具体的实现如下，感兴趣的朋友可以参参考下2013-12-12
这篇文章介绍了微信小程序实现简易计算器的方法，文中通过示例代码介绍的非常详细。对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2022-06-06
javascript获取客户端IP的小程序，下面的代码是我在所有windowsNT5.0及以上的系统上都测试通过的，喜欢的朋友可以收藏下2013-11-11
这篇文章主要介绍了深入浅出ES6新特性之函数默认参数和箭头函数 的相关资料,需要的朋友可以参考下2016-08-08
本文做了一个JavaScript的求爱小特效，不仅能出现下面的图的效果，还可以让这个图形跟随着鼠标转动哦,需要的朋友可以参考下2014-05-05
最新评论