JavaScript代码实现图片延迟加载并淡入淡出显示效果
2016-08-05 17:15
951 查看
对于一个网站,最占用带宽,最影响页面显示速度的东西就是图片。图片是很重要的,有时是必须的,作为一个站长,我们是千方百计的使用各种技巧来优化图片,我们可以使用
ImageOptim 或 TinyPNG 来消减图片体积,或用 data
URIs 和小图片来提升图片加载速度。如果一个页面上图片太大,或图片太多,无法消减,我们有另外一个方法来提升用户的页面显示体验,那就是延迟加载(lazy
load)。之前我们介绍过使用 Lazy
Load jQuery 插件。但其实还有一种更简单的方法,只需要几行代码,就能达到这种效果。同时,还附加一种淡入淡出的显示效果.
首先是图片标记的写法:
需要将图片的地址放到 data-src属性里,而src值不需要,直接将src属性去掉。
CSS代码
所有具有data-src属性的图片,我们将其初始显示状态为不可见,通过透明度来调节:
data-src 属性去掉,换成src属性,但这是图片加载成功后的动作
相比起其它各种的图片延迟加载技术,这种方法非常的简单,它几乎不要求其它任何条件,可以用在任何地方,使用起来非常灵活。
当然,简单有简单的好坏,也会因为简单而不足。它不具有图片图片滚动到可视窗口内再加载的功能。最终使用哪种技术,还是要看场景而定。
ImageOptim 或 TinyPNG 来消减图片体积,或用 data
URIs 和小图片来提升图片加载速度。如果一个页面上图片太大,或图片太多,无法消减,我们有另外一个方法来提升用户的页面显示体验,那就是延迟加载(lazy
load)。之前我们介绍过使用 Lazy
Load jQuery 插件。但其实还有一种更简单的方法,只需要几行代码,就能达到这种效果。同时,还附加一种淡入淡出的显示效果.
首先是图片标记的写法:
<img data-src="/path/to/image.jpg" alt="">
需要将图片的地址放到 data-src属性里,而src值不需要,直接将src属性去掉。
CSS代码
所有具有data-src属性的图片,我们将其初始显示状态为不可见,通过透明度来调节:
img { opacity: 1; transition: opacity 0.3s; } img[data-src] { opacity: 0; }我们最终会将
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'); }; });
相比起其它各种的图片延迟加载技术,这种方法非常的简单,它几乎不要求其它任何条件,可以用在任何地方,使用起来非常灵活。
当然,简单有简单的好坏,也会因为简单而不足。它不具有图片图片滚动到可视窗口内再加载的功能。最终使用哪种技术,还是要看场景而定。
相关文章推荐
- jquery 插件实现图片延迟加载效果代码
- JavaScript实现的多个图片广告交替显示效果代码
- JS实现图片延迟加载并淡入淡出效果的简单方法
- JavaScript实现的多个图片广告交替显示效果代码
- JavaScript图片水平淡入淡出切换效果代码
- jquery.lazyload.js实现图片延迟加载——wordpress图片随滚动条渐显效果
- javascript实现上传图片并预览的效果实现代码
- 网络图片延迟加载实现代码 超越jquery控件
- JavaScript实现图片延迟加载技术
- javascript 图片轮换显示效果代码
- jquery.lazyload.js实现图片延迟加载——wordpress图片随滚动条渐显效果
- JavaScript预加载图片并显示loading的代码
- jquery javascript 实现上传图片及图片大小验证、图片预览效果代码
- JavaScript预加载图片并显示loading的代码
- 原生javascript实现图片轮播效果代码
- 用javascript实现旋转图片效果的代码
- 一个不错的,JavaScript代码,显示首页图片幻灯片效果
- javascript实现图片的延迟加载
- jquery.lazyload.js实现图片延迟加载——wordpress图片随滚动条渐显效果