简介

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
});

lazyload.js详解的更多相关文章

  1. 图片懒加载lazyload.js详解

    简介 lazyload.js用于长页面图片的延迟加载,视口外的图片会在窗口滚动到它的位置时再进行加载,这是与预加载相反的. 优点 它可以提高页面加载速度: 在某些情况清晰它也可以帮助减少服务器负载. ...

  2. 图片懒加载插件lazyload.js详解

    <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...

  3. 【three.js详解之一】入门篇

    [three.js详解之一]入门篇   开场白 webGL可以让我们在canvas上实现3D效果.而three.js是一款webGL框架,由于其易用性被广泛应用.如果你要学习webGL,抛弃那些复杂的 ...

  4. 【three.js详解之二】渲染器篇

    [three.js详解之二]渲染器篇   本篇文章将详细讲解three.js中渲染器(renderer)的设置方法. three.js文档中渲染器的分支如下: Renderers CanvasRend ...

  5. [js高手之路]深入浅出webpack系列2-配置文件webpack.config.js详解

    接着上文,重新在webpack文件夹下面新建一个项目文件夹demo2,然后用npm init --yes初始化项目的package.json配置文件,然后安装webpack( npm install ...

  6. [js高手之路]深入浅出webpack教程系列3-配置文件webpack.config.js详解(下)

    本文继续接着上文,继续写下webpack.config.js的其他配置用法. 一.把两个文件打包成一个,entry怎么配置? 在上文中的webpack.dev.config.js中,用数组配置entr ...

  7. [js高手之路]深入浅出webpack教程系列2-配置文件webpack.config.js详解(上)

    [js高手之路]深入浅出webpack教程系列索引目录: [js高手之路]深入浅出webpack教程系列1-安装与基本打包用法和命令参数 [js高手之路]深入浅出webpack教程系列2-配置文件we ...

  8. dev-server.js详解

    转载自:https://www.cnblogs.com/ye-hcj/p/7091706.html dev-server.js详解 require('./check-versions')() var ...

  9. webpack.dev.conf.js详解

    转载自:https://www.cnblogs.com/ye-hcj/p/7087205.html webpack.dev.conf.js详解 //引入当前目录下的utils.js文件模块var ut ...

随机推荐

  1. VMware三个版本workstation、server、esxi的区别

    VMware三个版本 workstation: 单机级,用在个人桌面系统中,需要操作系统支持 servier:工作组级,用于服务器,需要操作系统支持 esxi:企业级,用于服务器,不需要操作系统支持 ...

  2. wow7.1 xd 新手教程

    本人第一次录游戏视频,很多地方说错了 第一节说奶量百万,其实是十万 目前上传去百度云,录了奶德,跟猫德 [https://pan.baidu.com/s/1jIsLlg6]

  3. 终于找到全annotation配置springMVC的方法了(事务不失效)

    如果带上事务,那么用annotation方式的事务注解和bean配置,事务会失效,要将service bean配置到xml文件中才行 这个问题是由于问答上有解决方案 引用 这个问题很经典了 在主容器中 ...

  4. Angular.js表单以及与Bootatrap的使用

    首先从angular.js的目录开始,如下图,知道了我们要学什么,然后再开始有目的的学习与对比. 1.从表达式开始: ng-app指令初始化一个 AngularJS 应用程序. ng-init指令初始 ...

  5. MySQL不能插入中文字符及中文字符乱码问题

    MySQL的默认编码是Latin1,不支持中文,要支持中午需要把数据库的默认编码修改为gbk或者utf8.在安装后MySQL之后,它的配置文件不是很给力,不知道你们的是不是,反正我的是! 开始插入中文 ...

  6. 数组、单链表和双链表介绍 以及 双向链表的C/C++/Java实现

    概要 线性表是一种线性结构,它是具有相同类型的n(n≥0)个数据元素组成的有限序列.本章先介绍线性表的几个基本组成部分:数组.单向链表.双向链表:随后给出双向链表的C.C++和Java三种语言的实现. ...

  7. Clipping Magic – 帮助你轻松删除图片背景

    Clipping Magic 让您轻松去除图片的背景,可以根据路径进行裁剪.操作很简单,只需拖动图像到放置区,或使用按钮选择文件.标记前景为绿,背景为红色,然后标记算法会帮助你处理好细节.处理后的图片 ...

  8. 测试Flask应用_学习笔记

    源代码尽在我的github上面:https://github.com/521xueweihan 欢迎大家交流学习 """ setUp() 方法中会创建一个新的测试客户端并 ...

  9. Android Logcat 封装类

    简单日志封装类: public final class CLog { public static final boolean DEBUG = true; private CLog() { } publ ...

  10. Hibernate核心类用法-使用Transaction管理事务

    一个典型的事务应该使用下面的形式 在创建完Session对象后即使用beginTransaction()启动事务 从此开始直到commit()之间的代码 都会处于同一个事务中 这两个函数之间所有的数据 ...