图片延迟加载处理的实现

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

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验证。

生活不易，码农辛苦
如果您觉得本网站对您的学习有所帮助,可以手机扫描二维码进行捐赠