简介

lazyload.js用于长页面图片的延迟加载,视口外的图片会在窗口滚动到它的位置时再进行加载,这是与预加载相反的。

优点

  • 它可以提高页面加载速度;
  • 在某些情况清晰它也可以帮助减少服务器负载。

安装

bower安装:

$ bower install jquery.lazyload

npm安装:

$ npm install jquery-lazyload  

使用

lazyload依赖与jquery。所以先引入jquery和lazyload

<script src="jquery.js"></script>
<script src="jquery.lazyload.js"></script>

1.将图片路径写入data-original属性
2.给lazyload的图片增加一个名为lazy的class
3.选择所有要lazyload的图片(img.lazy),执行lazyload();

<img class="lazy" data-original="img/example.jpg" style="margin-top:1000px" height="200">
<script>
$(function(){
$("img.lazy").lazyload();
})
</script>

注意:必须设置图片的高度或者宽度,否则插件可能无法正常工作

提前加载——Threshold

lazyload默认是当滚动到该图片位置时,加载该图片。但是可以通过设置Threshold参数来实现滚到距离其xx px时就加载。

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

上面的例子设置了滚动到距离图片20px时,图片就开始再开始加载

事件触发(可以是jquery事件,也可以是自定义事件)——Event

当触发定义的事件时,图片才开始加载

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

上面的例子使图片点击后,才开始加载

Tip:你可以使用这个来实现图片的延迟加载

$(function() {
$("img.lazy").lazyload({
event : "sporty"
});
}); $(window).bind("load", function() {
var timeout = setTimeout(function() {
$("img.lazy").trigger("sporty")
}, 5000);
});

上面的代码在页面加载完毕后五秒才开始加载图片

设定效果——Effects

插件默认的加载效果是 show() ,你可以使用任何你想要的效果。下面的代码使用了 fadeIn()

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

滚动容器内的图片——container

插件也可以使用在滚动容器内的图片上。下面的div拥有scrollerbar,内容的内容进行滚动,滚到图片位置时,图片开始加载

<div style="height:600px;overflow:scroll" id="container">
<img class="lazy" data-original="img/example.jpg" alt="" style="margin-top:1000px" height="200">
</div>
<script>
$(function(){
$("img.lazy").lazyload({
container: $("#container")
});
})
</script>

不顺序排列的图片

  • 插件会执行一个寻找未加载图片的循坏,该循环会检查图片是否可见,默认情况下,当第一个视图外的图片被找到,循环就会停止 。
  • 但是存在一种情况:页面布局图片的顺序和html图片代码的顺序不一致;它会导致本该加载的没有加载。这种情况下就可以将 failurelimit 设为 10 ,它令插件找到 10 个不在可见区域的图片是才停止搜索. 如果你有一个恶心的布局, 请把这个参数设高一点。

代码:

$("img.lazy").lazyload({
failure_limit : 10
});

处理隐藏图片——skip_invisible

为了提升性能,插件默认忽略隐藏的图片;如果想要加载隐藏图片.设置skip_invisible为false;

注意:Webkit浏览器将自动把没有宽度和高度的图像视为不可见

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

转载:https://www.cnblogs.com/yzg1/p/5051554.html

其他的图片懒加载: http://www.layui.com/doc/modules/flow.html

图片懒加载lazyload.js详解的更多相关文章

  1. 图片懒加载--lazyload.js的用法

    这几天公司的项目已经完成的差不多了,只剩下各种优化问题.今天着重于图片加载的优化.当一个页面需要下拉很长而且又有过多的图片要加载时,就会发生很多http请求,就会拉慢网页加载速度,用户体验不友好.怎么 ...

  2. 插件:★★★ !!!图片懒加载 lazyload.js 、 jquery.scrollLoading.js

    插件:图片懒加载 jquery.lazyload.js 2016-3-31 插件说明:http://www.w3cways.com/1765.html (小插件,好用) 下载地址: https://r ...

  3. js插件---图片懒加载lazyload

    js插件---图片懒加载lazyload 一.总结 一句话总结:使用异常简单,src里面放加载的图片,data-original里面放原图片,不懂的位置去官网或者github找API就好. 1.laz ...

  4. [js开源组件开发]图片懒加载lazyload

    图片懒加载lazyload 前端对请求的一种优化方式,为什么叫懒加载,无从查起,反正我当初一直认为它是滚动加载的一种类型.它主要是以图片或背景在可视区域内时才显示真正的图片,减少src带来的负荷.所以 ...

  5. js插件---图片懒加载echo.js结合 Amaze UI ScrollSpy 使用

    js插件---图片懒加载echo.js结合 Amaze UI ScrollSpy 使用 一.总结 一句话总结:图片懒加载echo.js结合 Amaze UI ScrollSpy 使用的效果就是:懒加载 ...

  6. 前端实现图片懒加载(lazyload)的两种方式

    在实际的项目开发中,我们通常会遇见这样的场景:一个页面有很多图片,而首屏出现的图片大概就一两张,那么我们还要一次性把所有图片都加载出来吗?显然这是愚蠢的,不仅影响页面渲染速度,还浪费带宽.这也就是们通 ...

  7. 前端性能优化--图片懒加载(lazyload image)

    话说前头: 上次写了一篇webpack的学习心得,webpack能做到提升前端的性能,其模块打包最终生成一个或少量的文件能够减少对服务端的请求.除此之外,本次的图片懒加载(当然不仅限于图片,还可以有视 ...

  8. 前端性能优化成神之路--图片懒加载(lazyload image)

    图片懒加载(当然不仅限于图片,还可以有视频,flash)也是一种优化前端性能的方式.使用懒加载可以想要看图片时才加载图片,而不是一次性加载所有的图片,从而在一定程度从减少服务端的请求 什么是懒加载 懒 ...

  9. jQuery插件图片懒加载lazyload

    来自XXX的前言: 什么是ImageLazyLoad技术 在页面上图片比较多的时候,打开一张页面必然引起与服务器大数据量的 交互.尤其是对于高清晰的图片,占的几M的空间.ImageLazyLoad技术 ...

随机推荐

  1. pthread条件变量

    pthread条件变量等待条件有两种方式:无条件等待pthread_cond_wait()和计时等待pthread_cond_timedwait(),其中计时等待方式如果在给定时刻前条件没有满足,则返 ...

  2. centos7下配置samba,win10访问

    yum install -y samba samba-client 更改配置 [root@abcd mnt]# cat /etc/samba/smb.conf [global] workgroup = ...

  3. PL SQL 基础

    Oracle之PL/SQL学习笔记   自己在学习Oracle是做的笔记及实验代码记录,内容挺全的,也挺详细,发篇博文分享给需要的朋友,共有1w多字的学习笔记吧.是以前做的,一直在压箱底,今天拿出来整 ...

  4. 网页截图工具CutyCapt

    网页截图工具CutyCapt   CuteCapt是Kali Linux提供的一款网页截图工具.该工具运行在命令行中,可以将WebKit引擎解析的网页保存为图片.它保存的文件支持矢量图和位图两大类型, ...

  5. [BZOJ3205][APIO2013]Robot(斯坦纳树)

    3205: [Apio2013]机器人 Time Limit: 15 Sec  Memory Limit: 128 MBSubmit: 1007  Solved: 240[Submit][Status ...

  6. [Codeforces 10E] Greedy Change

    Brief Introduction: 给你一些种类的硬币,用最少的硬币数表示X 求最小的使贪心算法错误的X Algorithm: 一道论文题,<A Polynomial-time Algori ...

  7. []ARC099

    C:普及组难度的题 D:令$S(n)$表示$n$的数位和,一个数$n$是Snuke number当且仅当对所有$m\gt n$有$\frac n{S(n)}\leq\frac m{S(m)}$,求出前 ...

  8. 【kd-tree】bzoj3290 Theresa与数据结构

    离线所有操作,对所有可能存在的点建立kd-tree,add相当于权值+1,cancel相当于权值-1. 修改操作要记录kd-tree上每个点的fa,从底向上地进行修改. 优化:若一个矩形框的sumv= ...

  9. 【左偏树】BZOJ2809-[APIO2012]dispatching

    [题目大意] 在一个忍者的帮派里,一些忍者们被选中派遣给顾客,然后依据自己的工作获取报偿.在这个帮派里,有一名忍者被称之为 Master.除了 Master以外,每名忍者都有且仅有一个上级.为保密,同 ...

  10. DBA_SEGMENTS - 查看数据库对象所分配的物理存储空间

    SELECT SEGMENT_NAME,SEGMENT_TYPE,<code>TABLESPACE_NAME</code>,EXTENTS,BLOCKS,BYTES/1024/ ...