jquery.lazyload-1.9.3中文文档 -- 延迟加载图片的jQuery插件
最近使用 jquery.lazyload.js 这个jQuery插件的时候, 突然发现对这个插件相对全面的介绍不多.
特别是对lazyload()方法中的配置选项的介绍少之又少.
随即整理一份供大家参阅.
说明: 我使用的版本是1.9.3
废话不多少, 直接上代码:
一, 使用小Demo
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Demo</title><style>#container {width: 765px;margin: auto;}#container img {width: 100%;}</style>
</head>
<body><div id="container"><img class="lazy" data-original="./image/img1.jpg" alt=""><img class="lazy" data-original="./image/img2.jpg" alt=""><img class="lazy" data-original="./image/img3.jpg" alt=""><img class="lazy" data-original="./image/img4.jpg" alt=""><img class="lazy" data-original="./image/img5.jpg" alt=""><img class="lazy" data-original="./image/img6.jpg" alt=""></div>
</body>
<script src="./js/jquery-1.11.0.min.js"></script>
<script src="./js/jquery.lazyload.js"></script>
<script>$(function() {$('img.lazy').lazyload({ effect: "fadeIn" });
});</script>
</html>
下方有完整代码链接.
上述Demo中仅用到了 lazyload 配置选项中的 effect 属性, 接下来介绍下该版本提供的所有属性和具体用法.
首先, 先来一张代码截图:
对应代码如下:
$('img.lazy').lazyload({// threshold: 提前开始加载高度.threshold: 200,// failure_limit: 同 failurelimitfailure_limit: 10,// event: 设置何种事件触发时才加载, 默认 scrollevent: 'click',// effect: 使用何种载入效果effect: "fadeIn",// container: 对某容器中的图片实现效果container: $("#container"),// data_attribute: 用于设置 lazyload 操作的自定义属性(data-后面的属性名)data_attribute : "attr",// skip_invisible: 是否 不加载不可见图片. true 不加载, false 加载.skip_invisible : false,// appear: 用于在图片加载之前到显示图片之间的处理函数,一般用于展示加载动画.appear: function() {},// load: 用于图片加载完毕之后执行的函数.load: function() {},// placeholder: 设置占位图片路径placeholder : "img/lazy.gif",// failurelimit: 一次加载图片的张数(图片排序混乱时使用)failurelimit : 10,// effectspeed: 设置动画持续时长, 单位毫秒effectspeed : 1000,});
从中可一目了然的看到所有可配置属性. 接下来逐个介绍对应属性.
1, threshold: 默认值 0
threshold: 值为数字, 用于设置提前开始加载高度. 如设置为200, 表示滚动条在离目标位置还有 200 的高度时就开始加载图片, 可以做到不让用户察觉.
2, failure_limit : 默认值 0
failure_limit: 值为数字, 同 failurelimit(下文介绍)
3, event: 默认值 "scroll"
event: 用于设置触发加载的时机. 值有scroll(滚动), click(点击), mouseover(鼠标划过), sporty(运动的), foobar(…).可以实现鼠标莫过或点击图片才开始加载,后两个值未测试…
4, effect: 默认值 "show"
effect: 用于设置显示图片是的动画效果. 值有: show(直接显示), fadeIn(淡入), slideDown(下拉)等
5, container: 默认值 window
container: 值为某容器, 用于设置对某容器中的图片实现效果. lazyload默认在拉动浏览器滚动条时生效, 这个参数可以让你在拉动某DIV的滚动条时依次加载其中的图片
6, data_attribute: 默认值 "original"
data_attribute: 用于设置 lazyload 操作的自定义属性(data-后面的属性名)
7, skip_invisible: 默认值 true
skip_invisible: 设置是否加载不可见的图片.
Lazy Load 插件默认对隐藏的图片不加载(例如 display:none ). 这样做有助于性能的优化. 如果希望连隐藏的图片一起加载,则可以把 skip_invisible 设为 false .
8, appear: 默认值 null
appear: 用于在图片加载之前到显示图片之间的处理函数,一般用于展示加载动画.
9, load: 默认值 null
load: 用于图片加载完毕之后执行的函数.
10, placeholder: 默认值 "data:image/png;base64,iV......"
placeholder: 用于设置占位图片.
值为某一图片路径. 此图片用来占据将要加载的图片的位置, 待图片加载时, 占位图则会隐藏
接下来的两个是兼容低版本的属性, 在该版本中正常使用.
11, effectspeed : 毫秒数
effectspeed: 用于控制动画的速度.
属性默认是空的, 所以如果不设置它, 动画的时间为400毫秒.
12, failurelimit: 值为数字. 在图片布局混乱时使用.
Lazy Load 有一个循环查找 img 的机制. 根据 HTML 文档的布局从上往下查找, 当找到第一个并未显示/加载的 img 时, 就会停止往下查找.(其实就是对 $("img.lazy") 这个对象(组)进行顺序查找)
那这个 failure_limit 的属性有什么用呢?
现在网站设计时, 都会用到大量的定位样式, 如: float 和 position , 这样在浏览器呈现的布局效果和 HTML 文档中的 DOM 顺序有很大差异.
这样就会存在一种情况, 某 <img> 标签已出现在屏幕上,但它却无法显示(因为按顺序加载的话, 还没排到它)!!
当Lazy Load 在找到第一个未显示的 <img> 标签时, 查找已经被终止了, 并没有继续往下遍历.
当设置了 failure_limit 属性之后, Lazy Load 会查找到对应个数未显示的 <img> 标签处.
当在图片多且布局复杂的页面时, failure_limit 的作用就很大了.
原文还温馨提示: If you have a funky layout set this number to something high. 如果你的网站布局很"变态",建议把该值调得更高.
在这里获取本章源码.
本章结束。
如果文章对你有帮助,碰巧想请我喝杯咖啡,可以点击这里。
jquery.lazyload-1.9.3中文文档 -- 延迟加载图片的jQuery插件相关推荐
- jQuery.ui.1.7.2--Datepicker中文文档
这是Datepicker部分的翻译, 有时间的朋友可以加到那份完整的里面...方面查阅. <?xml version="1.0" encoding="UTF-8&q ...
- lavaral中文手册_Laravel-mix 中文文档
概览 基本示例 larave-mix 是位于webpack顶层的一个简洁的配置层,在 80% 的情况下使用 laravel mix 会使操作变的非常简单.尽管 webpack 非常的强大,但大部分人都 ...
- jQuery EasyUI API 中文文档 - ValidateBox验证框
jQuery EasyUI API 中文文档 - ValidateBox验证框,使用jQuery EasyUI的朋友可以参考下. 用 $.fn.validatebox.defaults 重写了 def ...
- Lodash 中文文档 (v3.10.1) - “Lang” 方法
Lodash 中文文档 (v3.10.1) - "Lang" 方法 Translated by PeckZeg Original Docs: Lodash v3.10.1 Docs ...
- App.js实现使用js开发app的应用,此文是中文文档
在阅读前,在此说明下,本人英文一直不好,所以该文档是借助翻译工具翻译的,阅读起来可能有点不好,请各位谅解,哪位大神有标准的中文文档请分享下 Github下载地址:https://github.com/ ...
- c if sortable html,sortable.js中文文档
sortable.js中文文档 Sortable.js是一款优秀的js拖拽库,支持ie9及以上版本ie浏览器和现代浏览器,也可以运行在移动触摸设备中.不依赖jQuery.支持 Meteor.Angul ...
- 使用JavaScript生成二维码教程-附qrcodejs中文文档
使用javascript生成二维码 依赖jquery 需要使用到的库 https://github.com/davidshimj... DIV <div id="qrcode" ...
- Draggabilly中文文档
Draggabilly中文文档 根据Draggabilly官方文档翻译,由于英文水平有限,部分内容可能有误.本文档只翻译了主要的选项配置等,想了解更多请查看官方文档. js拖拽插件 1.0版本支持ie ...
- Chrome 开发者工具官方中文文档
传送门 Chrome开发者工具官方中文文档 Chrome开发者工具详解 前端学习front-end-study系列 Elements面板(https://zhuanlan.zhihu.com/p/24 ...
最新文章
- Maven学习教程(六)
- 趣图:你能Get到笑点么?
- 把ipa文件上传到服务器,windows电脑上传ipa到appstore的详细流程
- val什么意思vb中的属性值_老司机带你探索Mysql中int(1)、int(10)、int(11)的区别是什么?...
- 保姆级教程,终于搞懂脏读、幻读和不可重复读了!(经典回顾)
- bool类型_C语言编程第11讲——C语言的布尔类型
- git 代码回滚_谁说用 Git 一定要用命令行?试试 SourceTree 吧
- 近 45 亿元拿下开源服务器 Nginx,F5 买断应用交付未来?
- 乔春洋:品牌文化的意义
- python我想对你说_python学习22天----模块、包
- Win7电脑中毒解决过程复盘
- 磁盘和文件系统的管理
- 干货分享 |全面总结XSS
- linux操作系统中ssh的默认端口号,sshd服务的默认端口号
- 干货!JNPF快速开发平台功能一览
- 记录vue使用bable将es6转译为es5
- hazelcast 搭建_hazelcast Management Center 源码分析
- 无情未必真豪杰,怜子如何不丈夫——愿天下有情人终成眷属
- RED5的API介紹-4
- 新手第一次用云渲染如何快速上手