jquery插件图片延时加载实例详解
效果预览：http://keleyi.com/keleyi/phtml/image/index.htm
使用方法：
1.导入JS插件
<script src="http://keleyi.com/keleyi/pmedia/jquery-1.9.1.min.js" type="text/javascript"></script>
<script src="http://keleyi.com/keleyi/phtml/image/jquery.lazyload.js" type="text/javascript"></script>
2.在你的页面中加入如下的javascript：
$("img").lazyload();
这将会使所有的图片都延迟加载。
当然插件还有几个配置项可供设置。
1.改变threshold
$(“img”).lazyload({ threshold : 200 });
把阀值设置成200 意思就是当图片没有看到之前先load 200像素。
2.当然了你也可以通过设置占位符图片和自定事件来触发加载图片事件
复制代码 代码如下:
$("img").lazyload({
placeholder : "img/grey.gif",
event : "click"
});
3.可以通过定义effect 参数来定义一些图片显示效果
复制代码 代码如下:
$("img").lazyload({
placeholder : "img/grey.gif",
effect : "fadeIn"
});
LazyLoad(延迟加载)技术不仅仅用在对网页中图片的延迟加载，对数据同样可以，Google Reader和Bing图片搜索就把
LazyLoad技术运用的淋漓尽致；
缺陷：
1.与Ajax技术的冲突；
2.图片的延迟加载，遇到高度特别高的图片，会出现停止加载的问题；
3.写代码不规范的同学要注意了，不管由于什么原因，如果您的页面中，img标签的height属性未定义，那么我建议您最好不要使用ImageLazyLoad
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>图片延迟加载-柯乐义</title>
<script type="text/javascript" src="http://keleyi.com/keleyi/pmedia/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="http://keleyi.com/keleyi/phtml/image/jquery.lazyload.js"></script>
</head>
<body>
jquery实现图片延迟加载效果
<a href="http://keleyi.com/a/bjac/et551617.htm" target="_blank">原文</a><br />
<img src="http://keleyi.com/keleyi/phtml/image/img/grey.gif" data-original="http://keleyi.com/keleyi/phtml/image/img/bmw_m1_hood.jpg" width="765" height="574" alt="BMW M1 Hood keleyi.com" /><br />
<img src="http://keleyi.com/keleyi/phtml/image/img/grey.gif" data-original="http://keleyi.com/keleyi/phtml/image/img/bmw_m1_side.jpg" width="765" height="574" alt="BMW M1 Side keleyi.com" /><br />
<img src="http://keleyi.com/keleyi/phtml/image/img/grey.gif" data-original="http://keleyi.com/keleyi/phtml/image/img/viper_1.jpg" width="765" height="574" alt="Viper 1 keleyi.com" />
<img src="http://keleyi.com/keleyi/phtml/image/img/grey.gif" data-original="http://keleyi.com/keleyi/phtml/image/img/viper_corner.jpg" width="765" height="574" alt="Viper Corner keleyi.com" /><br />
<img src="http://keleyi.com/keleyi/phtml/image/img/grey.gif" data-original="http://keleyi.com/keleyi/phtml/image/img/bmw_m3_gt.jpg" width="765" height="574" alt="BMW M3 GT keleyi.com" />
<img src="http://keleyi.com/keleyi/phtml/image/img/grey.gif" data-original="http://keleyi.com/keleyi/phtml/image/img/corvette_pitstop.jpg" width="765" height="574" alt="Corvette Pitstop keleyi.com" />
<script type="text/javascript" charset="utf-8">
$(function () {
$("img").lazyload({
effect: "fadeIn"
});
});
</script>
</body>
</html>
郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。
