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 相关文章推荐
JavaScript是否可实现多线程  深入理解JavaScript定时机制
Dec 22 Javascript
jQuery的初始化与对象构建之浅析
Apr 12 Javascript
cument.execCommand()用法深入理解
Dec 04 Javascript
SOSO地图JS画出标注和中心点以html形式运行
Aug 09 Javascript
javascript删除字符串最后一个字符
Jan 14 Javascript
把字符串按照特定的字母顺序进行排序的js代码
Jan 28 Javascript
JavaScript中toString()方法的使用详解
Jun 05 Javascript
AngularJS中$injector、$rootScope和$scope的概念和关联关系深入分析
Jan 19 Javascript
微信小程序组件 marquee实例详解
Jun 23 Javascript
es7学习教程之fetch解决异步嵌套问题的方法示例
Jul 21 Javascript
vue搜索和vue模糊搜索代码实例
May 07 Javascript
vue动态绑定class的几种常用方式小结
May 21 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
PHP获取http请求的头信息实现步骤
2012/12/16 PHP
php检测图片木马多进制编程实践
2013/04/11 PHP
php实现refresh刷新页面批量导入数据的方法
2014/12/23 PHP
两款万能的php分页类
2015/11/12 PHP
javascript 兼容FF的onmouseenter和onmouseleave的代码
2008/07/19 Javascript
jQuery 判断页面元素是否存在的代码
2009/08/14 Javascript
理解Javascript_12_执行模型浅析
2010/10/18 Javascript
js的一些常用方法小结
2011/06/29 Javascript
在IE浏览器中resize事件执行多次的解决方法
2011/07/12 Javascript
javascript suggest效果 自动完成实现代码分享
2012/02/17 Javascript
Extjs4 GridPanel的主要配置参数详细介绍
2013/04/18 Javascript
javascript中为某个元素指定事件的三种方式
2014/08/07 Javascript
JS应用正则表达式转换大小写示例
2014/09/18 Javascript
jquery实现全选和全不选功能效果的实现代码【推荐】
2016/05/05 Javascript
bootstrap快速制作后台界面
2016/12/05 Javascript
bootstrap模态框示例代码分享
2017/05/17 Javascript
node.js中fs.stat与fs.fstat的区别详解
2017/06/01 Javascript
layui弹出层按钮提交iframe表单的方法
2018/08/20 Javascript
JavaScript内置对象math,global功能与用法实例分析
2019/06/10 Javascript
layui使用button按钮 点击出现弹层 弹层中加载表单的实例
2019/09/04 Javascript
微信小程序开发(二):页面跳转并传参操作示例
2020/06/01 Javascript
[01:21:58]守擂赛DOTA2第一周决赛
2020/04/22 DOTA
在python带权重的列表中随机取值的方法
2019/01/23 Python
python使用minimax算法实现五子棋
2019/07/29 Python
python实现将range()函数生成的数字存储在一个列表中
2020/04/02 Python
Python列表元素删除和remove()方法详解
2021/01/04 Python
Python 调用C++封装的进一步探索交流
2021/03/04 Python
如何使用amaze ui的分页样式封装一个通用的JS分页控件
2020/08/21 HTML / CSS
单位创先争优活动方案
2014/01/26 职场文书
人事专员职责
2014/02/22 职场文书
平面设计专业求职信
2014/08/09 职场文书
后勤个人工作总结
2015/02/28 职场文书
2015年营销工作总结范文
2015/04/23 职场文书
老乡聚会通知
2015/04/23 职场文书
办公室年度工作总结2015
2015/05/21 职场文书
关于vue-router-link选择样式设置
2022/04/30 Vue.js