|
页面中图片过多能够让图片延迟加载会大大提高页面的加载速度，提高用户可用性。
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验证。 （编辑：威海站长网）
【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!
|
