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 相关文章推荐
TopList标签和JavaScript结合两例
Aug 12 Javascript
jQuery 全选/反选以及单击行改变背景色实例
Jul 02 Javascript
jQuery中innerHeight()方法用法实例
Jan 19 Javascript
jQuery实现延迟跳转的方法
Jun 05 Javascript
javascript实现简易计算器
Feb 01 Javascript
微信小程序实现的涂鸦功能示例【附源码下载】
Jan 12 Javascript
vue移动UI框架滑动加载数据的方法
Mar 12 Javascript
vue展示dicom文件医疗系统的实现代码
Aug 27 Javascript
iview form清除校验状态的实现
Sep 19 Javascript
微信小程序如何实现点击图片放大功能
Jan 21 Javascript
JavaScript交换变量的常用方法小结【4种方法】
May 07 Javascript
js+css实现全屏侧边栏
Jun 16 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
DOTA2游戏同人动画《龙之血》导演接受采访
2021/03/05 欧美动漫
PHP添加图片水印、压缩、剪切的封装类
2015/08/17 PHP
如何离线执行php任务
2017/02/21 PHP
解决laravel5.4下的group by报错的问题
2019/10/16 PHP
ext form 表单提交数据的方法小结
2008/08/08 Javascript
使用jquery实现div的tab切换实例代码
2013/05/27 Javascript
jquery属性选择器not has怎么写 行悬停高亮显示
2013/11/13 Javascript
javascript中利用柯里化函数实现bind方法
2016/04/29 Javascript
老生常谈JavaScript数组的用法
2016/06/10 Javascript
javascript中数组和字符串的方法对比
2016/07/20 Javascript
微信小程序 本地存储及登录页面处理实例详解
2017/01/11 Javascript
jQuery实现打开网页自动弹出遮罩层或点击弹出遮罩层功能示例
2017/10/19 jQuery
Javascript迭代、递推、穷举、递归常用算法实例讲解
2019/02/01 Javascript
vue自定义switch开关组件,实现样式可自行更改
2019/11/01 Javascript
vue基于better-scroll仿京东分类列表
2020/06/30 Javascript
微信小程序向Java后台传输参数的方法实现
2020/12/10 Javascript
[51:17]完美世界DOTA2联赛循环赛Inki vs DeMonsTer 第二场 10月30日
2020/10/31 DOTA
python中xrange和range的区别
2014/05/13 Python
Python实现嵌套列表及字典并按某一元素去重复功能示例
2017/11/30 Python
轻松实现TensorFlow微信跳一跳的AI
2018/01/05 Python
Python实现PS滤镜的万花筒效果示例
2018/01/23 Python
Django读取Mysql数据并显示在前端的实例
2018/05/27 Python
python re模块的高级用法详解
2018/06/06 Python
Python使用reportlab模块生成PDF格式的文档
2019/03/11 Python
Python 中PyQt5 点击主窗口弹出另一个窗口的实现方法
2019/07/04 Python
浅谈python中统计计数的几种方法和Counter详解
2019/11/07 Python
Python进阶之迭代器与迭代器切片教程
2020/01/29 Python
Python函数默认参数常见问题及解决方案
2020/03/26 Python
Tensorflow安装问题: Could not find a version that satisfies the requirement tensorflow
2020/04/20 Python
银行实习生的自我评价
2014/01/13 职场文书
预备党员党课思想汇报
2014/01/13 职场文书
差生评语大全
2014/05/04 职场文书
2015年学生会部门工作总结
2015/04/21 职场文书
大学生创业计划书常用模板
2019/08/07 职场文书
JavaScript实现简单拖拽效果
2021/09/15 Javascript
CentOS7 minimal 最小化安装网络设置过程
2022/12/24 Servers