图片懒加载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
其他的图片懒加载: http://www.layui.com/doc/modules/flow.html
图片懒加载lazyload.js详解的更多相关文章
- 图片懒加载--lazyload.js的用法
这几天公司的项目已经完成的差不多了,只剩下各种优化问题.今天着重于图片加载的优化.当一个页面需要下拉很长而且又有过多的图片要加载时,就会发生很多http请求,就会拉慢网页加载速度,用户体验不友好.怎么 ...
- 插件:★★★ !!!图片懒加载 lazyload.js 、 jquery.scrollLoading.js
插件:图片懒加载 jquery.lazyload.js 2016-3-31 插件说明:http://www.w3cways.com/1765.html (小插件,好用) 下载地址: https://r ...
- js插件---图片懒加载lazyload
js插件---图片懒加载lazyload 一.总结 一句话总结:使用异常简单,src里面放加载的图片,data-original里面放原图片,不懂的位置去官网或者github找API就好. 1.laz ...
- [js开源组件开发]图片懒加载lazyload
图片懒加载lazyload 前端对请求的一种优化方式,为什么叫懒加载,无从查起,反正我当初一直认为它是滚动加载的一种类型.它主要是以图片或背景在可视区域内时才显示真正的图片,减少src带来的负荷.所以 ...
- js插件---图片懒加载echo.js结合 Amaze UI ScrollSpy 使用
js插件---图片懒加载echo.js结合 Amaze UI ScrollSpy 使用 一.总结 一句话总结:图片懒加载echo.js结合 Amaze UI ScrollSpy 使用的效果就是:懒加载 ...
- 前端实现图片懒加载(lazyload)的两种方式
在实际的项目开发中,我们通常会遇见这样的场景:一个页面有很多图片,而首屏出现的图片大概就一两张,那么我们还要一次性把所有图片都加载出来吗?显然这是愚蠢的,不仅影响页面渲染速度,还浪费带宽.这也就是们通 ...
- 前端性能优化--图片懒加载(lazyload image)
话说前头: 上次写了一篇webpack的学习心得,webpack能做到提升前端的性能,其模块打包最终生成一个或少量的文件能够减少对服务端的请求.除此之外,本次的图片懒加载(当然不仅限于图片,还可以有视 ...
- 前端性能优化成神之路--图片懒加载(lazyload image)
图片懒加载(当然不仅限于图片,还可以有视频,flash)也是一种优化前端性能的方式.使用懒加载可以想要看图片时才加载图片,而不是一次性加载所有的图片,从而在一定程度从减少服务端的请求 什么是懒加载 懒 ...
- jQuery插件图片懒加载lazyload
来自XXX的前言: 什么是ImageLazyLoad技术 在页面上图片比较多的时候,打开一张页面必然引起与服务器大数据量的 交互.尤其是对于高清晰的图片,占的几M的空间.ImageLazyLoad技术 ...
随机推荐
- 集训考试题(CF510C Fox And Names的简化版)
题目描述给定n个由小写字母组成的字符串,请你求出一个字母表顺序,使得这n个字符串是按照字典序升序排列的,数据保证存在合法的字母表顺序.如果存在多个解,输出字典序最小的那个. 输入格式第一行一个整数n. ...
- c++ primer敲代码第二章
今天越来越发现 学习一门编程语言,没有大量的code实践是不行的.看得快忘得更快.痛下决心,把primer的code习题一一实现. 习题2.11 底数和指数,求结果 #include <iost ...
- POJ 3250 Bad Hair Day(单调栈)
[题目链接] http://poj.org/problem?id=3250 [题目大意] 有n头牛,每头牛都有一定的高度,他能看到在离他最近的比他高的牛前面的所有牛 现在每头牛往右看,问每头牛能看到的 ...
- 【分块】hdu5057 Argestes and Sequence
分块,v[i][j][k]表示第i块内第j位是k的元素数.非常好写.注意初始化 要注意题意,①第i位是从右往左算的. ②若x没有第i位,则用前导零补齐10位.比如103---->00000001 ...
- 【费用流】bzoj3280 小R的烦恼
类似bzoj1221 http://www.cnblogs.com/autsky-jadek/p/4174087.html 只不过大学有多个,所以我们另开一个节点汇总所有'S->大学'的边,然后 ...
- iOS开发——使用Autolayout生成动态高度的TableViewCell单元格
步骤一.TableViewCell中使用Autolayout 要点:Cell的高度必须在Constraints中指明,但不能定死,需要让内部由内容决定高度的View决定动态高度. 如UILabel设置 ...
- C#将json字符串解析成对象
首先我们在客户端生成json字符串,通过ajax把该字符串传到服务器端 //这是一个以id,email,age的json字符串 var jdata="[{\"id\&quo ...
- Oracle中读取数据一些原理研究
文章很多摘录了 http://blog.163.com/liaoxiangui@126/blog/static/7956964020131069843572/ 同时基于这篇文章的基础上,补充一些学习要 ...
- tengine + lua 实现流量拷贝
环境搭建参考地址:http://www.cnblogs.com/cp-miao/p/7505910.html cp.lua local res1, res2, action action = ngx. ...
- iOS:iOS为什么要用-all_load、-ObjC、-force_load
为了减少工作量复用部分代码,于是乎我们开始选择重构整个项目,把可以公用的代码放在一起打包成一个静态库导入到其他的项目中使用. 介绍这部分内容的文章在网上很多,各位可以Baidu一下细看. 但是每次在加 ...