请选择 进入手机版 | 继续访问电脑版

玩酷之家

 找回密码
 立即注册
搜索
热搜: 活动 交友 discuz
查看: 1048|回复: 0

Lazy Load Plugin for jQuery

[复制链接]

39

主题

39

帖子

162

积分

注册会员

Rank: 2

积分
162
发表于 2017-11-7 16:14:12 | 显示全部楼层 |阅读模式
Lazy Load是一个用Javascript写得jQuery插件。它可以使一个长网页中,不在当前视图中的图片延迟加载,以提高页面的载入速度。


使用方法:

在页面头部加入插件
  1. <script src="jquery.js" type="text/javascript"></script>
  2. <script src="jquery.lazyload.js" type="text/javascript"></script>
复制代码
在使用图片的地方,使用下面的设置
  1. <img class="lazy" src="img/grey.gif" alt="" width="640" data-original="img/example.jpg" data-pinit="registered" />
复制代码
src是替换图片,一般使用1*1像素的图片替代。后面data-original才是真正的图片。
然后在你的代码中加入,就可以了
  1. $("img.lazy").lazyload();
复制代码
设置延迟加载参数
  1. $("img.lazy").lazyload({ threshold : 200 });
复制代码
这样,图片就可以在距离显示区域200像素的时候就开始预先加载。这个值可以是负值,表示提前加载。

使用特效
  1. $("img.lazy").lazyload({
  2.     effect : "fadeIn"
  3. });
复制代码
默认延迟加载使用show方法来显示图片,可以用这个方法来改变图片的显示方法。


回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

Archiver|手机版|小黑屋|玩酷之家 ( 鄂ICP备14012049号-1 )

GMT+8, 2018-12-12 16:39 , Processed in 0.162299 second(s), 18 queries .

Powered by Discuz! X3.4

© 2001-2017 Comsenz Inc.

快速回复 返回顶部 返回列表