lazyload.js参数说明
lazyload.js是jQuery的一个插件,可以用来实现图片异步加载.
lazyload插件如何添加参数:
$("img").lazyload({
//参数添加到此位置,建议一行一个,用英文,作间隔
});
下面对lazyload.js的一些参数进行说明,供使用者做出更贴切的效果。
1,用图片提前占位
placeholder : "img/grey.gif",
参数:placeholder,值为某一图片路径.此图片用来占据将要加载的图片的位置,待图片加载时,占位图则会隐藏
2,载入使用何种效果
effect : "fadeIn",
参数:effect(特效),值有show(直接显示),fadeIn(淡入),slideDown(下拉)等,常用fadeIn
3,提前开始加载
threshold : 200,
参数:threshold,值为数字,代表页面高度.如设置为200,表示滚动条在离目标位置还有200的高度时就开始加载图片,可以做到不让用户察觉.
4,事件触发时才加载
event : "click",
参数:event,值有click(点击),mouseover(鼠标划过),sporty(运动的),foobar(…).可以实现鼠标莫过或点击图片才开始加载,后两个值未测试…
5,对某容器中的图片实现效果
container: $("#container"),
参数:container,值为某容器.lazyload默认在拉动浏览器滚动条时生效,这个参数可以让你在拉动某DIV的滚动条时依次加载其中的图片
6,图片排序混乱时
failurelimit : 10,
参数:failurelimit,值为数字.lazyload默认在找到第一张不在可见区域里的图片时则不再继续加载,但当HTML容器混乱的时候可能出现可见区域内图片并没加载出来的情况,failurelimit意在加载N张可见区域外的图片,以避免出现这个问题.
————————————————————————
经测试,lazyload插件在IE7,firefox,chrome中均有效,未出现网上所说只对firefox有效的情况.只是在IE中不易看到fadeIn等特效,大概是IE的Javascript执行效率太低所致.
lazyload.js参数说明的更多相关文章
- 延迟加载外部js文件,延迟加载图片(jquery.lazyload.js和echo,js)
js里一说到延迟加载,大都离不开两种情形,即外部Js文件的延迟加载,以及网页图片的延迟加载: 1.首先简单说一下js文件的3种延迟加载方式: (1)<script type="text ...
- 懒加载插件- jquery.lazyload.js
Lazy Load 是一个用 JavaScript 编写的 jQuery 插件. 它可以延迟加载长页面中的图片. 在浏览器可视区域外的图片不会被载入, 直到用户将页面滚动到它们所在的位置. 这与图片预 ...
- jquery懒加载jquery.lazyload.js
Lazy Load 是一个用 JavaScript 编写的 jQuery 插件. 它可以延迟加载长页面中的图片. 在浏览器可视区域外的图片不会被载入, 直到用户将页面滚动到它们所在的位置. 这与图片预 ...
- 前端优化之图片延迟加载(lazyload.js)
要想缩短首屏加载时间,思路一般是减少http请求次数和降低每次的请求量.本文中使用现成的lazyload.js插件,文末会放出下载地址. lazyload.js可以实现图片分批次加载,不是一次性加载完 ...
- lazyload.js实现图片异步载入
所谓图片异步加载,意思是不用一次把图片全部加载完,你可以叫它延迟加载,缓冲加载都行. 看看你有没有这种需求:某篇文章图片很多,如果在载入文章时就载入所有图片,无疑会延缓载入速度,让用户等更久,所以,我 ...
- LazyLoad.js及scrollLoading.js
http://blog.csdn.net/ning109314/article/details/7042829 目前图片延迟加载主要分两大块,一是触发加载(根据滚动条位置加载图片):二是自动预加载(加 ...
- jQuery延迟加载(懒加载)插件 – jquery.lazyload.js
引入:<script type="text/javascript" src="${base}/resources/shop/js/jquery.lazyload.j ...
- 延迟加载图片插件LazyLoad.js的使用方法
我们常常会见到很多网页的图片并不是一打开页面就全部加载的,而是浏览到当前的图片位置才显示出来.这是怎么实现出来的呢? 其实这就是目前较为流行的“延迟加载”(Lazy Load)技术,灵感来自Matt ...
- lazyload.js详解
简介 lazyload.js用于长页面图片的延迟加载,视口外的图片会在窗口滚动到它的位置时再进行加载,这是与预加载相反的. 优点: 它可以提高页面加载速度: 在某些情况清晰它也可以帮助减少服务器负载. ...
随机推荐
- hdu5303(2015多校2)--Delicious Apples(贪心+枚举)
Delicious Apples Time Limit: 5000/3000 MS (Java/Others) Memory Limit: 524288/524288 K (Java/Other ...
- Cache和Buffer的区别(转载)
1. Cache:缓存区,是高速缓存,是位于CPU和主内存之间的容量较小但速度很快的存储器,因为CPU的速度远远高于主内存的速度,CPU从内存中读取数据需等待很长的时间,而 Cache保存着CPU刚 ...
- (十)Thymeleaf用法——Themeleaf内联
5. 内联 [[...]]是内联文本的表示格式,但需要使用th:inline属性(分为text,javascript,none)激活. 5.1 文本内联 <p th:inline=&quo ...
- Windows重装系统
本文主要针对那些不会重装系统windows的用户,虽然重装系统win7或win10很简单,但是还是有一些小白不明白如何安装新系统,也不清楚有几种安装方式.本教程现在就详细的讲讲利用U盘重装系统的具体步 ...
- H5中滚动卡顿的问题
加入-webkit-overflow-scrolling: touch;即可
- hibernate之6.one2many单向
表结构: 实体类图: CRUD: Student: package com.demo.model; import java.io.UnsupportedEncodingException; impor ...
- Linux - vim安装 配置与使用
一 Vim 简单介绍 曾经一直用vi,近期開始使用 vim,以下将两者做一下比較. vi和vim都是word=%E5%A4%9A%E6%A8%A1&fr=qb_search_exp&i ...
- 一个可以模拟GET,POST,PUT,DELET请求的HTTP在线工具
一个简陋的HTTP请求工具,UI比较丑陋.0.0,可以用于接口调试. 之前在调试公司的远程接口的时候用的是curl,后来也在网上找到几种Http请求模拟的客户端程序.当时后来发现google app ...
- Babel中的stage-0,stage-1,stage-2以及stage-3
大家知道,将ES6代码编译为ES5时,我们常用到Babel这个编译工具.大家参考一些网上的文章或者官方文档,里面常会建议大家在.babelrc中输入如下代码: { "presets" ...
- /var/log目录下的Linux日志文件功能详解_转
摘自:http://www.niaoyun.com/help/application/386.html 学习linux应该知道日志文件的所在位置以及它们包含的内容,在系统运行正常的情况下学习了解这些不 ...