lazyload.js详解

摘要:
lazyload.js详解简介lazyload.js用于长页面图片的延迟加载,视口外的图片会在窗口滚动到它的位置时再进行加载,这是与预加载相反的。安装bower安装:$bowerinstalljquery.lazyloadnpm安装:$npminstalljquery-lazyload使用lazyload依赖与jquery。所以先引入jquery和lazyload注意:必须设置图片的高度或者宽度,否则插件可能无法正常工作提前加载——Thresholdlazyload默认是当滚动到该图片位置时,加载该图片。
lazyload.js详解

简介

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

免责声明:文章转载自《lazyload.js详解》仅用于学习参考。如对内容有疑问,请及时联系本站处理。

上篇最短路径算法(I)-Floyed、dijkstraAndroid签名总结下篇

宿迁高防,2C2G15M,22元/月;香港BGP,2C5G5M,25元/月 雨云优惠码:MjYwNzM=

相关文章

Angular 学习笔记 (version 6 小笔记)

1. lazyload 的 path 变成相对路径了, 不过如果你用 ng update 的话, 依然可以不需要修改, cli config 好像能调支持绝对路径的写法. const routes: Routes =[ { path: '', loadChildren: './home/home.module#HomeModule'}, ]; 2. 新...

懒加载和预加载---性能优化

懒加载 认识 懒加载是一种按需延迟资源的方式。在加载显示页面时,并不一次性加载所有该页面所需要的图像,对于在可视区域之外的图像,可以等到用户scroll到该区域的时候,再进行加载 实现方式 1、目前已经有很多库实现了懒加载,例如lazysizes,可以考虑使用 2、使用库这样的操作,相当于增加一个需要请求的js文件,增加一次http请求。所以如果能够实现原...

jq图片懒加载

在图片比较多的页面中,如果一次性把所有的图片全部加载出来,不仅加载速度慢,还会对服务器造成不小的压力,也浪费了带宽(不是每个用户都会从头至尾看完所有页面内容),那么在图片比较多的情况下,我们就可以采取图片懒加载的形式来解决这个问题。 jq中有一个lazyload.js的插件,方便好用,下面简单的介绍一下这个插件的用法 1.lazyload.js是依赖于jq...

对于富文本编辑器中使用lazyload图片懒加载

使用lazyload.js图片懒加载的作用是给用户一个好的浏览体验,同时对服务器减轻了压力,当用户浏览到该图片的时候再对图片进行加载,项目中使用lazyload的时候需要将图片加入data-orginal的属性表明图片的路径,但是目前在做的项目中使用的是用户自己编辑的内容,不能对这些内容做修改,于是只能是在浏览的时候用js多加一段操作实现这个功能了, 在文...

页面图片懒加载、延迟加载(lazyload)

文档:http://www.h-ui.net/lib/jQuery.lazyload.js.shtml github地址:https://github.com/jieyou/lazyload Lazy Load是一个用js编写的jQuery插件,用来实现图片的延迟加载。只有在浏览器可视区域的图片才会被加载,没有滚动到的区域img标签上会有一个占位图片,而真...

[转]javascript 懒加载技术(lazyload)简单实现

1.前言懒加载技术(简称lazyload)并不是新技术, 它是js程序员对网页性能优化的一种方案.lazyload的核心是按需加载.在大型网站中都有lazyload的身影,例如谷歌的图片搜索页,迅雷首页,淘宝网,QQ空间等.因此掌握lazyload技术是个不错的选择,可惜jquery插件lazy load官网(http://www.appelsiini.n...