lazyloadJS的使用和常用设置

2016-04-01

前言

之前博主一直在用lazyload.js来做图片的懒加载，现在不太用，那么还是记一下笔记，省得以后忘记还要重新百度，看自己的比较容易懂。废话不说，切入正题喽！

lazyload简介

lazyload是一个基于jQuery的插件，用于长页面图片的延迟加载。

lazyload的安装

1.官网下载地址
2.使用npm install jquery-lazyload -S命令，当然npm是基于node.js的，所以你必须先安装node.js。

使用

1).lazyload依赖于jQuery，所以必须先引入jQuery

1 2	<script src="./node_modules/jquery/dist/jquery.min.js"></script> <script src="./node_modules/jquery-lazyload/jquery.lazyload.js"></script>

2).在页面中定义img标签，必须定义width和height。否则插件无法正常使用
3).将图片路径写入data-original属性，代替src属性

1	<img alt="" width="600" height="400" data-original="./images/1.jpeg">

4).使用js初始化lazyload插件

1
2
3

$(function(){
	$("img").lazyload();
})

常用设置

在初始化插件的时候，为lazyload()函数传入一个对象进行常用属性的设置。

提前加载 – threshold

lazyload默认是当滚动到该图片的位置时，加载该图片，可以通过设置threshold的值来指定距离，提前加载图片。例如：当距离图片200px的时候，加载图片

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

占位图片 – placeholder

使用placeholder属性设置，图片未加载时的loading图片

$(function(){
	$("img").lazyload({
		placeholder: "images/loading.gif"
	});
})

图片加载效果 – effect

插件默认的加载效果是show(),可以使用你想要的效果，例如淡入效果fadeIn

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

滚动容器内的图片 – container

插件也可以使用在滚动容器内的图片上，即内容进行滚动，滚到图片位置时，图片开始加载

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

不规则排列的图片 – failure_limit

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

处理隐藏图片 – skip_invisible

为了提升性能，插件默认忽略隐藏的图片；如果想要加载隐藏图片.设置skip_invisible为false;
注意：Webkit浏览器将自动把没有宽度和高度的图像视为不可见

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

事件触发图片加载 – event

当触发该事件时，图片才进行加载

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

这些这是一些简单配置，若是感兴趣的话，可以查看官方API