lazyload.js详解
2015-12-16 16:04
387 查看
原文地址:http://bigdots.github.io/2015/12/16/lazyload-js%E8%AF%A6%E8%A7%A3/**
简介
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 });
相关文章推荐
- javascript:void(0)是什么意思
- js实现将选中内容分享到新浪或腾讯微博
- bzoj1449【JSOI2009】球队收益
- js中如何判断是不是有效的手机号
- js代码判断浏览器种类IE、FF、Opera、Safari、chrome及版本
- 自定义JSP中的Taglib标签之二带自定义属性的标签
- js获取 input file 图片缩略图
- 自定义JSP中的Taglib标签之一简单入门篇(无参数的自定义标签)
- 推荐五款流行的JavaScript模板引擎
- js选择a问题
- 3.2:pandas数据的导入与导出【CSV,JSON】
- 【Javascript】网页卷去的距离与偏移量
- C# 解析 json
- js跨域问题
- JavaScript运行过程中的“预编译阶段”和“执行阶段”
- js 常用总结01
- js 常用总结01
- JavaScript DOM 编程艺术 学习笔记(1)(从零学javascript)
- JS中获取和操作iframe
- 【js小方法】isNaN,input中判断是数字