jQuery.lazyload
Lazy Load延迟加载也有的称为惰性加载,是一个用 JavaScript 编写的 jQuery 插件. 它可以延迟加载长页面中的图片. 在浏览器可视区域外的图片不会被载入, 直到用户将页面滚动到它们所在的位置. 这与图片预加载的处理方式正好是相反的.
在包含很多大图片长页面中延迟加载图片可以加快页面加载速度. 浏览器将会在加载可见图片之后即进入就绪状态. 在某些情况下还可以帮助降低服务器负担.
延迟加载是程序人性化的一种体现,提高用户体验,防止一次性加载大量数据,而是根据用户需要进行数据查询操作。
一、怎么使用?
1. Lazy Load 依赖于 jQuery,将下列代码加入页面 head 区域,当然也可以将这些代码放在</body>之前
<script src=”jquery-1.7.1.min.js” type=”text/javascript”></script>
<script src=”jquery.lazyload.mini.js” type=”text/javascript”></script>
2. HTML代码中src属性可以是1×1像素灰色gif,也可以是我们常用的一些等待加载图标.data-original属性才是我们需要加的图片
<img class=”lazy” src=”img/grey.gif” data-original=”img/example.jpg” width=”640″ heigh=”480″>
3.然后在执行代码中加入
$(“img.lazy”).lazyload();
这样样式为lazy的图片都将进行延迟加载.
二、禁用JavaScript浏览器的退路
几乎所有人的浏览器都启用JavaScript。当然也有某些情况下也有或禁用JavaScript的用户存在,当然这不是致命的,我们可以使用“noscript”
<img class=”lazy” src=”img/grey.gif” data-original=”img/example.jpg” width=”640″ heigh=”480″>
<noscript><img src=”img/example.jpg” width=”640″ heigh=”480″></noscript>
防止两个的图像同时显示用CSS隐藏一个。
.lazy { display: none; }
对于启用JavaScript的浏览器,当初始化插件。
$(“img.lazy”).show().lazyload();
这样当我们的浏览器都禁用JavaScript的时候也可以显示我们需要的图片。
三、设置灵敏度
默认情况下图片出现在浏览器可视区域就加载,浏览器可视区域外不加载。如果想要浏览器可视区域外的图片来加载可以设置阈值参数。threshold 选项默认值为 0(浏览器可视区域到图片的距离)。
$(“img.lazy”).lazyload({ threshold : 200 });
这样,当浏览器可视区与图片的距离太到200像素时图片就进行加载。
四、事件来触发加载
事件可以是任何jQuery或mouseover事件,比如点击。您也可以使用自己的自定义事件,如运动或foobar。默认是当到用户滚动浏览器使图片出现在可视区域加载。
$(“img.lazy”).lazyload({ event : “click” });
五、使用特效
默认情况下插件等待图像完全加载用show()来显示它。我们可以使用任何你想要的效果。下面的代码使用fadeIn效果。
$(“img.lazy”).lazyload({ effect : “fadeIn” });
六、容器内图像加载
可以使用插件在滚动图像容器加载,比如div和滚动条。只需通过这个容器作为jQuery对象。
CSS部份
#Container { height: 600px; overflow: scroll; }
js部份
$(“img.lazy”).lazyload({ container: $(“#container”) });
七、当图片不顺序排列
滚动页面的时候, Lazy Load 会循环为加载的图片. 在循环中检测图片是否在可视区域内. 默认情况下在找到第一张不在可见区域的图片时停止循环. 图片被认为是流式分布的, 图片在页面中的次序和 HTML 代码中次序相同. 但是在一些布局中, 这样的假设是不成立的. 不过我们可以通过 failurelimit 选项来控制加载行为.
$(“img.lazy”).lazyload({ failure_limit : 10 });
将 failurelimit 设为 10, 当插件找到 10 个不在可见区域的图片是才停止搜索. 如果你有一个猥琐的布局, 请把这个参数设高一点.
八、延迟加载图片
Lazy Load 插件的一个不完整的功能, 但是也能用来实现图片的延迟加载. 下面的代码实现了页面加载完成后再加载. 页面加载完成 5 秒后, 指定区域内的图片会自动进行加载.
$(function() {
$(“img:below-the-fold”).lazyload({ event : “sporty” });
});
$(window).bind(“load”, function() {
var timeout = setTimeout(function() {$(“img.lazy”).trigger(“sporty”)}, 5000);
});
参数说明
名称 默认值 说明 container window 父容器。延迟加载父容器中的图片。 [Demo1] [Demo2] event 'scroll' 触发加载的事件 [Demo] effect 'show' 加载使用的动画效果,如 show, fadeIn, slideDown 等 jQuery 自带的效果,或者自定义动画。 [Demo] effectspeed undefined 动画时间。作为 effect 的参数使用:effect(effectspeed) data_attribute 'original' 真实图片地址的 data 属性后缀 threshold 0 灵敏度。默认为 0 表示当图片出现在显示区域中的立即加载显示;设为整数表示图片距离 x 像素进入显示区域时进行加载;设为负数表示图片进入显示区域 x 像素时进行加载。 failure_limit 0 容差范围。页面滚动时,Lazy Load 会遍历延迟加载的图片,检查是否在显示区域内,默认找到第 1 张不可见的图片时,就终止遍历。因为 Lazy Load 认为图片的排序是与 HTML 中的代码中的排序相同,但是也可能会出现例外,通过该值来扩大容差范围。 skip_invisible true 跳过隐藏的图片。图片不可见时(如 display:none),不强制加载。 appear null 图片加载时的事件 (Function),有 2 个参数:elements_left(未加载的图片数量)、settings(lazyload 的参数)。[Demo](参考 DEMO 的源代码) load null 图片加载后的事件 (Function),有 2 个参数,同 appear 。[Demo](参考 DEMO 的源代码)
jQuery.lazyload的更多相关文章
- 延迟加载外部js文件,延迟加载图片(jquery.lazyload.js和echo,js)
js里一说到延迟加载,大都离不开两种情形,即外部Js文件的延迟加载,以及网页图片的延迟加载: 1.首先简单说一下js文件的3种延迟加载方式: (1)<script type="text ...
- 图片懒加载jquery lazyload
<script type="text/javascript" src="jquery-1.11.3.min.js"></script>& ...
- 懒加载插件- jquery.lazyload.js
Lazy Load 是一个用 JavaScript 编写的 jQuery 插件. 它可以延迟加载长页面中的图片. 在浏览器可视区域外的图片不会被载入, 直到用户将页面滚动到它们所在的位置. 这与图片预 ...
- jquery.lazyload 实现图片延迟加载jquery插件
看到了淘宝产品介绍中,图片是在下拉滚动条时加载,这是一个很不错的用户体验.减少了页面加载的时间了,也减轻了服务器的压力,就查了下用JQuery.. 什么是ImageLazyLoad技术 在页面上图 ...
- jquery懒加载jquery.lazyload.js
Lazy Load 是一个用 JavaScript 编写的 jQuery 插件. 它可以延迟加载长页面中的图片. 在浏览器可视区域外的图片不会被载入, 直到用户将页面滚动到它们所在的位置. 这与图片预 ...
- jQuery lazyload 懒加载
Lazy Load 是一个用 JavaScript 编写的 jQuery 插件. 它可以延迟加载长页面中的图片. 在浏览器可视区域外的图片不会被载入, 直到用户将页面滚动到它们所在的位置. 这与图片预 ...
- jQuery.lazyload使用及源码分析
前言: 貌似以前自己也写过图片懒加载插件,但是新公司使用的是jQuery.lazyload插件,为了更好的运用,自己还是把源码看了遍,分别记录了如何使用, 插件原理,各个配置属性的完整解释,demo实 ...
- jQuery.lazyload详解
<SCRIPT src="jquery.js" type=text/javascript></SCRIPT> <SCRIPT src="jq ...
- jQuery延迟加载(懒加载)插件 – jquery.lazyload.js
引入:<script type="text/javascript" src="${base}/resources/shop/js/jquery.lazyload.j ...
随机推荐
- C和指针 第十六章 习题
16.8 计算平均年龄 #include <stdlib.h> #include <stdio.h> #define MAX_LEN 512 int main() { int ...
- 前端网老姚浅谈:怎么学JavaScript?
作者:小不了链接:https://zhuanlan.zhihu.com/p/23265155来源:知乎著作权归作者所有.商业转载请联系作者获得授权,非商业转载请注明出处. 鉴于时不时,有同学私信问我( ...
- java的各种使用小知识点总结。
9,重写Arrays.sort public int getHeight(int[][] actors, int n) { // write code here if (null == actors ...
- js加载完所有的图片,适合电子相册哦~~~~
有些时候要一口气加载完所有的图片,所以代码就要这么写.... var imgArray = [ 'http://s16.mogucdn.com/p1/160202/upload_ifqwcmlcmyy ...
- windows 安装 mongodb
windows 安装 mongodb 下载 首先到官网下载合适的安装包,下载地址为 https://www.mongodb.com/download-center MongoDB for Window ...
- Markdown基本语法
Markdown 基本语法记录 # 欢迎使用 Cmd Markdown 编辑阅读器 ------ 我们理解您需要更便捷更高效的工具记录思想,整理笔记.知识,并将其中承载的价值传播给他人,**Cmd M ...
- Mosquitto搭建Android推送服务(三)Mosquitto集群搭建
文章钢要: 1.进行双服务器搭建 2.进行多服务器搭建 一.Mosquitto的分布式集群部署 如果需要做并发量很大的时候就需要考虑做集群处理,但是我在查找资料的时候发现并不多,所以整理了一下,搭建简 ...
- wps恢复经典模式
经典模式 情况一: 恢复的方法:点击红色区域 情况二: 恢复的方法:点击红色区域
- qt 定时器
重写方法 virtual void timerEvent(QTimerEvent *event); 启动定时器 timerId = startTimer(500);
- spring-boot 文件上传获取不到File原因,MultipartHttpServletRequest.getFiles为空
以下是spring-boot的处理方式,其他可参考处理具体问题:1.CommonsMultipartResolver解析不到request中的文件流2.Controller方法参数MultipartH ...