图片延迟加载处理的实现

概述页面中图片过多能够让图片延迟加载会大大提高页面的加载速度，提高用户可用性。 1、有的页面是页面过长或过宽，可以考虑只加载显示区域附近的图片。 2、图片所在窗口不显示，比如Tab内容切换，内容轮播等也要考虑把没有显示的图片延迟加载 第一种情况推荐使用jQuery.LazyLoad插件。 jQuery.La…

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

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

总结

以上是内存溢出为你收集整理的图片延迟加载处理的实现全部内容，希望文章能够帮你解决图片延迟加载处理的实现所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。