jquery插件lazyload.js延迟加载图片的使用方法


Posted in Javascript onFebruary 19, 2014

如果一个网页很长并且有很多图片的话,下载图片就需要很多时间,那么就会影响整个网页的加载速度,而这款延迟加载插件,会通过你的滚动情况来加载你需要看的图片,然后它才会从后台请求下载图片,最后显示出来。通过这个插件,可以在需要显示图片的时候,才下载图片,从而可以减少服务器的压力,提高页面加载速度。

Lazy Load 插件原理

修改目标img元素的src属性为orginal属性,从而中断图片的加载。检测滚动状态,然后把网页可视区域中的img的src属性还原然后加载图片,从而制造了一种缓冲加载的效果。代码引入方法:

<script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>
<script type="text/javascript" src="js/jquery.lazyload.js"></script>
<script type="text/javascript">
    $(document).ready(
    function($){
    $("img").lazyload({
         placeholder : "images/grey.gif", //加载图片前的占位图片
         effect      : "fadeIn" //加载图片使用的效果(淡入)
    });
    });
</script>

但是现在,很多Javascript大牛分析得出,这个插件其实并没有真正的起到缓加载的作用。确实是这样,官方也已经给出了说明和解决方法了。

其实原因就在于在新版的浏览器中,即使我们删除了Javascript控制的src属性,浏览器仍然会去加载这个图像。

那么我们该怎么解决呢?其实也很简单,需要直接修改HTML的结构,在img标签中添加新的属性,把src属性的值指向占位图片,添加data-original属性,让其指向真正的图像地址。比如:

<img src="img/grey.gif" data-original="img/example.jpg" >

当然,在上面的代码中我们把页面内的所有图片都延迟加载了,但有些时候我们并不希望这样,因为有些图片并不想然他们延迟加载,那么我们可以这样只需做:

如只缓冲加载类main下的图像

$(".main img").lazyload({
     placeholder : "images/grey.gif",
     effect      : "fadeIn"
});

加载挂载有lazy类的图像:

$("img.lazy").lazyload({
     placeholder : "images/grey.gif",
     effect      : "fadeIn"
});

其他的以此类推,适当做一下选择器调整就行了。

lazyload.js 高级使用方法:

下面部分来自官方文档,将官方文档进行了一下简单的翻译。

更周全的做法

我们不得不思考这样一个问题。我们定义了这样一个结构,那么网页中,就不会加载源图像了。只有当 Javascript 执行,才会显示这个源图像。如果用户的浏览器不支持或者用户关掉了支持 Javascript 的选项,那么我们的这个图像就无法显示出来。也就是说,如果没有 Javascript 的支持,我们的图像就无法显示出来。

应对这个问题,我们需要引入noscript 标签。大体思路如下:用 noscript 包含真实的图像位置,当浏览器不支持 Javascript,直接显示图像。

<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>

对现有图像,隐藏处理,使用 show()方法触发显示。

.lazy {
  display: none;
}

这样,如果浏览器不支持 Javascript,我们自定义的 img 就不会出现,而显示 noscript 里面的图像。具体实现代码如下:

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

提前加载

默认的情况是,当你滚动到图片位置的时候,插件开始加载。这样,用户可能首先看到的是一个空白图像,然后再缓慢出现。如果你想在用户滚动之前,提前加载这个图像,你可以配置一下参数。

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

threshold 这个参数,就是用来提前加载的。上面这个语句的意思是,当距离图片还有200像素的时候,就开始加载图片。

自定义触发事件

默认的触发事件,是滚动,当你滚动的时候,就会检查然后加载。你可以使用event属性,设置你自己的加载事件,之后你可以自定义触发这个事件的条件,然后去加载图像。

$("img.lazy").lazyload({
    event : "click"
});

自定义显示效果

默认的图片实现效果,就是没有效果,下载完成之后,直接显示出来。这样的用户体验并不好,你可以设置effect属性,来控制显示图片的效果。例如

$("img.lazy").lazyload({
    effect : "fadeIn"
});

fadeIn的效果就是,改变图片的透明度,渐现的方式出现。

把图像插入某个容器

大家如果使用智能手机的话,经常去应用网站下载应用,他们通常使用一个横着的容器,放一些手机截图。使用container属性,能很轻松在容器中实现缓冲加载。首先,我们需要用css定义这个容器,然后用这个插件进行加载。

#container { height: 600px; overflow: scroll; }
$("img.lazy").lazyload({
    container: $("#container")
});

加载不可见图像

有部分图像是不可见的,我们对其加上类似 display:none;等属性的图像。默认的情况下,这个插件是不会加载隐藏的不可见图像。如果我们需要用它加载不可见图像,我们需要将 skip_invisible设置为false,代码如下:

$("img.lazy").lazyload({
    skip_invisible : false
});

好了,这就是lazyload.js这款插件的简单介绍了。

Javascript 相关文章推荐
屏蔽鼠标右键、Ctrl+n、shift+F10、F5刷新、退格键 的javascript代码
Apr 01 Javascript
javascript 按键事件(兼容各浏览器)
Dec 20 Javascript
Bootstrap的图片轮播示例代码
Aug 31 Javascript
javascript设置和获取cookie的方法实例详解
Jan 05 Javascript
第一次接触神奇的Bootstrap基础排版
Jul 26 Javascript
JS基于正则表达式实现的密码强度验证功能示例
Sep 21 Javascript
在vue项目中引入highcharts图表的方法(详解)
Mar 05 Javascript
浅析vue.js数组的变异方法
Jun 30 Javascript
Vue中div contenteditable 的光标定位方法
Aug 25 Javascript
ES6使用export和import实现模块化的方法
Sep 10 Javascript
WEEX环境搭建与入门详解
Oct 16 Javascript
vue将data恢复到初始状态 &amp;&amp; 重新渲染组件实例
Sep 04 Javascript
悬浮数字的实现案例
Feb 19 #Javascript
js 获取、清空input type=&quot;file&quot;的值示例代码
Feb 19 #Javascript
js实现身份证号码验证的简单实例
Feb 19 #Javascript
js实现表格字段排序
Feb 19 #Javascript
js获取判断上传文件后缀名的示例代码
Feb 19 #Javascript
jQuery 文本框得失焦点的简单实例
Feb 19 #Javascript
JS实现仿百度输入框自动匹配功能的示例代码
Feb 19 #Javascript
You might like
一个数据采集类
2007/02/14 PHP
编译php 5.2.14+fpm+memcached(具体操作详解)
2013/06/18 PHP
php PDO异常处理详解
2016/11/20 PHP
PHP magento后台无法登录问题解决方法
2016/11/24 PHP
Laravel框架基于中间件实现禁止未登录用户访问页面功能示例
2019/01/17 PHP
php和asp语法上的区别总结
2019/05/12 PHP
js、css、img等浏览器缓存问题的2种解决方案
2013/10/23 Javascript
将form表单中的元素转换成对象的方法适用表单提交
2014/05/02 Javascript
AngularJs动态加载模块和依赖注入详解
2016/01/11 Javascript
JavaScript中的this机制
2016/01/30 Javascript
通过正则表达式获取url中参数的简单实现
2016/06/07 Javascript
Google 地图API Map()构造器详解
2016/08/06 Javascript
jquery 实时监听输入框值变化的完美方法(必看)
2017/01/26 Javascript
用jQuery旋转插件jqueryrotate制作转盘抽奖
2017/02/10 Javascript
Angular表格神器ui-grid应用详解
2017/09/29 Javascript
VUE脚手架具体使用方法
2019/05/20 Javascript
基于Vue el-autocomplete 实现类似百度搜索框功能
2019/10/25 Javascript
python使用range函数计算一组数和的方法
2015/05/07 Python
Python 基于Twisted框架的文件夹网络传输源码
2016/08/28 Python
python分布式环境下的限流器的示例
2017/10/26 Python
有趣的python小程序分享
2017/12/05 Python
Python PyQt4实现QQ抽屉效果
2018/04/20 Python
Python matplotlib绘制饼状图功能示例
2019/09/10 Python
利用Python制作动态排名图的实现代码
2020/04/09 Python
python处理写入数据代码讲解
2020/10/22 Python
基于python爬取梨视频实现过程解析
2020/11/09 Python
python 基于selectors库实现文件上传与下载
2020/12/31 Python
英国领先的酒类网上商城:TheDrinkShop
2017/03/16 全球购物
广告学毕业生求职信
2014/01/30 职场文书
2014年健康教育实施方案
2014/02/17 职场文书
农业局学习党的群众路线教育实践活动心得体会
2014/03/07 职场文书
大学生应聘求职信
2014/05/26 职场文书
质量安全标语
2014/06/07 职场文书
党员教师自我剖析材料
2014/09/29 职场文书
2014年教育教学工作总结
2014/11/13 职场文书
python区块链实现简版工作量证明
2022/05/25 Python