jquery.lazyload用法

最新推荐文章于 2017-01-01 14:58:00 发布

转载最新推荐文章于 2017-01-01 14:58:00 发布 · 135 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/hxh-hua/p/3239379.html

文章标签：

#javascript #ViewUI

本文详细介绍了jQuery lazyload插件的使用方法，包括如何引入jQuery库和lazyload插件，如何修改HTML中img标签的src属性为占位符，并通过JavaScript代码实现图片的延迟加载。此外，还提供了如何提前加载图片、触发加载事件以及调整淡出效果等高级用法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

lazyload是jquery的插件，作为延迟加载图片，减压服务器压力。

如何使用：

先把

<script src="jquery.js" type="text/javascript"></script>
<script src="jquery.lazyload.min.js" type="text/javascript"></script>放在body里面
修改html里面的img src为占位符1*1像素灰色的gif代码如下：
<img src="img/grey.gif" data-original="img/bmw_m1_hood.jpg" />

基本处理图片代码如下
$(function(){
$("img[data-original]").lazyload();
})

提前加载图片代码

$("img.lazy").lazyload({ threshold : 600 });数字可以修改

事件触发代码：

事件可以是任何 jQuery 时间, 如: click 和 mouseover. 你还可以使用自定义的事件, 如: sporty 和 foobar. 默认情况下处于等待状态, 直到用户滚动到窗口上图片所在位置. 在灰色占位图片被点击之前阻止加载图片, 你可以这样做:

$("img").lazyload({
	placeholder : "img/grey.gif",
	event : "click"
});

淡出效果代码：

$("img.lazy").lazyload({ 
    effect : "fadeIn"
});
加载隐藏的代码：特别是做选显卡的是总是要隐藏图片这个就要给设置为skip_invisible : false不然就加载不出来

$("img[data-original]").lazyload({skip_invisible : false});
参考英文网站：http://www.appelsiini.net/projects/lazyload

转载于:https://www.cnblogs.com/hxh-hua/p/3239379.html