jQuery延迟加载图片插件Lazy Load使用指南


Posted in Javascript onMarch 25, 2015

Lazy Load 是一个用 JavaScript 编写的 jQuery 插件. 它可以延迟加载长页面中的图片. 在浏览器可视区域外的图片不会被载入, 直到用户将页面滚动到它们所在的位置. 这与图片预加载的处理方式正好是相反的.

在包含很多大图片长页面中延迟加载图片可以加快页面加载速度. 浏览器将会在加载可见图片之后即进入就绪状态. 在某些情况下还可以帮助降低服务器负担.

jQuery延迟加载图片插件Lazy Load使用指南

怎样使用?

Lazy Load 依赖于 jQuery. 请将下列代码加入页面 head 区域:

<script src="jquery.js" type="text/javascript"></script>

<script src="jquery.lazyload.js" type="text/javascript"></script>

你必须修改 HTML 代码. 在 src 属性中设置展位符图片, demo 页面使用 1×1 像素灰色 GIF 图片. 并且需要将真实图片的 URL 设置到 data-original 属性. 这里可以定义特定的 class 以获得需要延迟加载的图片对象. 通过这种方法你可以简单地控制插件绑定.

<img class="lazy" src="img/grey.gif" data-original="img/example.jpg"  width="640" heigh="480">

处理图片的代码如下.

$("img.lazy").lazyload();

这将使所有 class 为 lazy 的图片将被延迟加载. 可以参考基本选项 demo

设置敏感度

几乎所有浏览器的 JavaScript 都是激活的. 然而可能你仍希望能在不支持 JavaScript 的客户端展示真实图片. 当浏览器不支持 JavaScript 时优雅降级, 你可以将真实的图片片段在写 <noscript> 标签内.

<img class="lazy" src="img/grey.gif" data-original="img/example.jpg"  width="640" heigh="480">

<noscript><img src="img/example.jpg" width="640" heigh="480"></noscript>

可以通过 CSS 隐藏占位符.

.lazy {

  display: none;

}

在支持 JavaScript 的浏览器中, 你必须在 DOM ready 时将占位符显示出来, 这可以在插件初始化的同时完成.

$("img.lazy").show().lazyload();

这些都是可选的, 但如果你希望插件平稳降级这些都是应该做的.

默认情况下图片会出现在屏幕时加载. 如果你想提前加载图片, 可以设置 threshold 选项, 设置 threshold 为 200 令图片在距离屏幕 200 像素时提前加载.

$("img.lazy").lazyload({ threshold : 200 });

占位图片

你还可以设定一个占位图片并定义事件来触发加载动作. 这时需要为占位图片设定一个 URL 地址. 透明, 灰色和白色的 1×1 象素的图片已经包含在插件里面.

事件触发加载

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

$("img").lazyload({

    placeholder : "img/grey.gif",

    event : "click"

});

使用特效

当图片完全加载的时候, 插件默认地使用 show() 方法来将图显示出来. 其实你可以使用任何你想用的特效来处理. 下面的代码使用 FadeIn 效果. 这是效果演示页面.

$("img.lazy").lazyload({ 

    effect : "fadeIn"

});

图片在容器里面

你可以将插件用在可滚动容器的图片上, 例如带滚动条的 DIV 元素. 你要做的只是将容器定义为 jQuery 对象并作为参数传到初始化方法里面. 这是水平滚动演示页面和垂直滚动的演示页面.

#container {

    height: 600px;

    overflow: scroll;

}

$("img.lazy").lazyload({         

     container: $("#container")

});

当图片不顺序排列

滚动页面的时候, Lazy Load 会循环为加载的图片. 在循环中检测图片是否在可视区域内. 默认情况下在找到第一张不在可见区域的图片时停止循环. 图片被认为是流式分布的, 图片在页面中的次序和 HTML 代码中次序相同. 但是在一些布局中, 这样的假设是不成立的. 不过你可以通过 failurelimit 选项来控制加载行为.

$("img.lazy").lazyload({ 

    failure_limit : 10

});

将 failurelimit 设为 10 令插件找到 10 个不在可见区域的图片是才停止搜索. 如果你有一个猥琐的布局, 请把这个参数设高一点.

延迟加载图片

Lazy Load 插件的一个不完整的功能, 但是这也能用来实现图片的延迟加载. 下面的代码实现了页面加载完成后再加载. 页面加载完成 5 秒后, 指定区域内的图片会自动进行加载. 这是延迟加载演示页面.

$(function() {          

    $("img:below-the-fold").lazyload({

        event : "sporty"

    }); }); $(window).bind("load", function() { 

    var timeout = setTimeout(function() {$("img.lazy").trigger("sporty")}, 5000); });

加载隐藏的图片

可能在你的页面上埋藏可很多隐藏的图片. 比如插件用在对列表的筛选, 你可以不断地修改列表中各条目的显示状态. 为了提升性能, Lazy Load 默认忽略了隐藏图片. 如果你想要加载隐藏图片, 请将 skip_invisible 设为 false

$("img.lazy").lazyload({ 

    skip_invisible : false

});

以上所述就是本文的全部内容了,希望大家能够喜欢。

请您花一点时间将文章分享给您的朋友或者留下评论。我们将会由衷感谢您的支持!

Javascript 相关文章推荐
JavaScript中使用typeof运算符需要注意的几个坑
Nov 08 Javascript
基于jQuery实现文本框缩放以及上下移动功能
Nov 24 Javascript
JavaScript清空数组元素的两种方法简单比较
Jul 10 Javascript
vue.js实现仿原生ios时间选择组件实例代码
Dec 21 Javascript
vue项目实现记住密码到cookie功能示例(附源码)
Jan 31 Javascript
原生JS封装_new函数实现new关键字的功能
Aug 12 Javascript
JS中通过url动态获取图片大小的方法小结(两种方法)
Oct 31 Javascript
微信小程序页面缩放式侧滑效果的实现代码
Nov 15 Javascript
使用js实现单链解决前端队列问题的方法
Feb 03 Javascript
解决三元运算符 报错“SyntaxError: can''t assign to conditional expression”
Feb 12 Javascript
使用vue打包进行云服务器上传的问题
Mar 02 Javascript
梳理一下vue中的生命周期
Dec 30 Vue.js
jQuery实现购物车计算价格功能的方法
Mar 25 #Javascript
JavaScript的事件代理和委托实例分析
Mar 25 #Javascript
JS实现简易图片轮播效果的方法
Mar 25 #Javascript
jquery处理页面弹出层查询数据等待操作实例
Mar 25 #Javascript
JavaScript动态添加列的方法
Mar 25 #Javascript
javascript实现复选框选中属性
Mar 25 #Javascript
jQuery的load()方法及其回调函数用法实例
Mar 25 #Javascript
You might like
php的header和asp中的redirect比较
2006/10/09 PHP
PHP4实际应用经验篇(7)
2006/10/09 PHP
ThinkPHP实现简单登陆功能
2017/04/28 PHP
JavaScript 自动完成脚本整理(33个)
2009/10/20 Javascript
javascript 隐藏/显示指定的区域附HTML元素【legend】用法
2010/03/05 Javascript
浏览器加载、渲染和解析过程黑箱简析
2012/11/29 Javascript
javascript简单实现等比例缩小图片的方法
2016/07/27 Javascript
input file上传 图片预览功能实例代码
2016/10/25 Javascript
jQuery实现的省市联动菜单功能示例【测试可用】
2017/01/13 Javascript
js从输入框读取内容,比较两个数字的大小方法
2017/03/13 Javascript
AjaxUpLoad.js实现文件上传功能
2018/03/02 Javascript
javascript中this的用法实践分析
2019/07/29 Javascript
layerui代码控制tab选项卡,添加,关闭的实例
2019/09/04 Javascript
JS使用正则表达式提交页面验证的代码
2019/10/16 Javascript
微信小程序入门之指南针
2020/10/22 Javascript
JS闭包原理及其使用场景解析
2020/12/03 Javascript
[01:51]历届DOTA2国际邀请赛举办地回顾 TI9落地上海
2018/08/26 DOTA
Python中运算符&quot;==&quot;和&quot;is&quot;的详解
2016/10/08 Python
Python应用03 使用PyQT制作视频播放器实例
2016/12/07 Python
python自动发邮件库yagmail的示例代码
2018/02/23 Python
用python 批量更改图像尺寸到统一大小的方法
2018/03/31 Python
下载python中Crypto库报错:ModuleNotFoundError: No module named ‘Crypto’的解决
2018/04/23 Python
解决python 未发现数据源名称并且未指定默认驱动程序的问题
2018/12/07 Python
详解如何在Apache中运行Python WSGI应用
2019/01/02 Python
详解python项目实战:模拟登陆CSDN
2019/04/04 Python
Python join()函数原理及使用方法
2020/11/14 Python
土木工程专业个人求职信
2013/12/05 职场文书
春节联欢晚会主持词
2014/03/24 职场文书
党员批评与自我批评总结
2014/10/15 职场文书
实习单位证明范例
2014/11/17 职场文书
幼儿园三八妇女节活动总结
2015/02/06 职场文书
2015年财政所工作总结
2015/04/25 职场文书
全民创业工作总结
2015/08/13 职场文书
公司借款担保书
2015/09/22 职场文书
SQL Server表分区降低运维和维护成本
2022/04/08 SQL Server
python处理json数据文件
2022/04/11 Python