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详解相关推荐
- jquery.lazyload.js详解
简介 lazyload.js用于长页面图片的延迟加载,视口外的图片会在窗口滚动到它的位置时再进行加载,这是与预加载相反的. 优点: 它可以提高页面加载速度: 在某些情况清晰它也可以帮助减少服务器负载. ...
- Grunt学习笔记002---Gruntfile.js详解
Gruntfile.js详解 使用yeomen新建一个项目,里面会自动帮你创建一个完整项目的全部目录,这里针对新建出来的Gruntfile.js做一下简单说明,用作以后参考使用,由于还是菜鸟,很多东西 ...
- php Immutable,Immutable.js详解
这次给大家带来Immutable.js详解,使用Immutable.js的注意事项有哪些,下面就是实战案例,一起来看一下. Immutable.js在react + router + redux项目中 ...
- 微信小程序学习:(二)app.js及index.js详解
微信小程序学习:(二)app.js及index.js详解 项目地址:https://github.com/leoricding/- 在用ide创建小程序项目时,系统默认为我们创建了一个hellowor ...
- nodejs app.js详解
app.js代码及其解释 //这里主要是引用所必须要的模块,当然,这些模块是需要使用"npm install 模块名"安装的 //模块依赖 var express = requir ...
- JS详解 | 对象 事件 节点 | 系统性学习 | 无知的我费曼笔记
无知的我正在复盘js- 文章目录 JavaScript 1 常用命令 输出语句 转换为字符串 得到变量类型 1 获取元素对象 1.1 H5新增获取元素对象 1.2 直接获取特殊元素对象 2 事件三要素 ...
- jQuery lazyload插件详解和问题解答
lazyload插件用于图片延迟加载,节省服务器带宽,减少服务器请求次数,提高网站的页面加载速度,用于网站性能优化,只有当图片在窗口可视范围内时才向服务器请求: 参数: threshold:设置距离窗 ...
- node.js详解Http服务器
概念:Node.js提供了http模块.其中封装了一个高效的HTTP服务器和一个建议的HTTP客户端. http.server是一个基于事件的HTTP服务器.内部有C++实现.接口由JavaSc ...
- 【three.js详解之一】入门篇
开场白 webGL可以让我们在canvas上实现3D效果.而three.js是一款webGL框架,由于其易用性被广泛应用.如果你要学习webGL,抛弃那些复杂的原生接口从这款框架入手是一个不错的选择. ...
最新文章
- SQL与NoSQL区别-授权方式
- ifm management of technology q and a session 2
- [Innost]Android深入浅出之Binder机制
- Git 合并分支选项 --squash 合并提交历史
- 信息学奥赛一本通(1101:不定方程求解)
- C#语言学习--基础部分(十三)枚举类型和结构体
- Machine Learning Notes Ⅲ
- 【NumPy基础】100道numpy练习——初学与入门篇
- C语言实现flappy bird(可视化编程)
- c语言大作业计算器,C语言实现简单计算器程序
- C语言新手入门可执行代码(加备注)
- 我的世界风格字体 艺术字生成 Textcraft的介绍及使用
- JsonFormat注解转换时间错误问题解决方案
- Latex IEEEtran第一次总结
- 相对路径遍历Relative Path Traversal
- 【coq】函数语言设计 练习题poly 总结
- 搜狗输入法 与fcitx-ui-qimpanel冲突_搜狗AI录音笔E2预售开启,不只是录音笔,还能拍照翻译?丨43周新闻...
- Vue.js框架简介(1)
- 电脑上怎么进行pdf合并免费
- c++ 取绝对值函数
热门文章
- SpringBoot-切面AOP实现统一逻辑处理
- 按键精灵 getcursorpos没有用_给你们想要的一键输出II按键精灵脚本开发教程
- LINUX系统管理命令
- K8s 原生 Serverless 实践:ASK 与 Knative
- mysql不被其他ip访问_mysql数据库无法被其他ip访问的问题
- indexof方法_[ 翻译 ] ES6中数组去重的三种方法
- html页面跳转_HTTP响应协议状态码以及跳转问题
- Mysql小练习(1)
- 计算机职业短命,最短命10种活法你占几条?9成人长期对电脑
- 给oracle用户赋权限导入导出,Oracle常用命令-用户、表空间、赋权限、导入导出...