程序员人生 网站导航

图片延迟加载处理的实现

栏目:htmlcss时间:2013-10-13 12:42:24

页面中图片过多能够让图片延迟加载会大大提高页面的加载速度,提高用户可用性。

1、有的页面是页面过长或过宽,可以考虑只加载显示区域附近的图片。

2、图片所在窗口不显示,比如Tab内容切换,内容轮播等也要考虑把没有显示的图片延迟加载

第一种情况推荐使用jQuery.LazyLoad插件。

jQuery.LazyLoad.js插件使用方法非常简单

页面头引入js文件

<script src="jquery.js" type="text/javascript"></script>
<script src="jquery.lazyload.js" type="text/javascript"></script>

使用对所有图片都使用延迟加载

$("img").lazyload();或者使用选择符给部分图片延迟加载如下

$("img.lazy").lazyload();
$("#contrainer img").lazyload();
$(".slideshow img").lazyload();
设置敏感性,也就是距离边界的距离,默认是0

$("img").lazyload({ threshold : 200 });设置点位图片

$("img").lazyload({ placeholder : "img/grey.gif" });设置图片加载事件:这里可以设置一切jQuery的事件,也可以自定义事件名称

$("img").lazyload({
placeholder : "img/grey.gif",
event : "click"
});
设置图片加载效果

$("img").lazyload({
placeholder : "img/grey.gif",
effect : "fadeIn"
});
更新详细的使用方法请移步官方http://www.appelsiini.net/projects/lazyload

第二种情况隐藏区域内容的图片,上面的插件就不起作用了这里可以考虑作如下处理
标签如下:

container.find('img[data-src]').each(function() {
$(this).attr('src', $(this).attr('data-src'))
.removeAttr('data-src');
});

可以通过HTML5验证。

------分隔线----------------------------
------分隔线----------------------------

最新技术推荐