炫意html5
最早CSS3和HTML5移动技术网站之一

简单几句JavaScript代码实现图片延迟加载并淡入淡出显示效果

对于一个网站,最占用带宽,最影响页面显示速度的东西就是图片。图片是很重要的,有时是必须的,作为一个站长,我们是千方百计的使用各种技巧来优化图片,我们可以使用 ImageOptim 或 TinyPNG 来消减图片体积,或用 data URIs 和小图片来提升图片加载速度。如果一个页面上图片太大,或图片太多,无法消减,我们有另外一个方法来提升用户的页面显示体验,那就是延迟加载(lazy load)。之前我们介绍过使用 Lazy Load jQuery 插件。但其实还有一种更简单的方法,只需要几行代码,就能达到这种效果。同时,还附加一种淡入淡出的显示效果。

下面我们先看看演示效果:

HTML代码

首先是图片标记的写法:

<img data- data-original="/path/to/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');
};
});

相比起其它各种的图片延迟加载技术,这种方法非常的简单,它几乎不要求其它任何条件,可以用在任何地方,使用起来非常灵活。

当然,简单有简单的好坏,也会因为简单而不足。它不具有图片图片滚动到可视窗口内再加载的功能。最终使用哪种技术,还是要看场景而定。

炫意HTML5 » 简单几句JavaScript代码实现图片延迟加载并淡入淡出显示效果

Java基础教程Android基础教程