基于jquery的lazy loader插件实现图片的延迟加载[简单使用]


Posted in Javascript onMay 07, 2011

通过使用jquery的lazy loader插件可以实现图片的延迟加载,当网页比较长的时候,会先只加载用户视窗内的图片,视窗外的图片会等到你拖动滚动条至后面才加载,这样有效的避免了因图片过多而加载慢的弊端。

使用lazy loader插件很简单,只要在页面中引入lazy loader插件,然后为页面上的图片调用延迟加载方法就可以了。lazy loader插件的下载地址:http://www.appelsiini.net/projects/lazyload。下面先看看具体的使用方法:

<script type="text/javascript" src="jquery.js"></script> 
<script type="text/javascript" src="jquery.lazyload.js"></script> 
<script type="text/javascript"> 
$(document).ready( 
function(){ 
$("img").lazyload({ 
placeholder : "images/grey.gif", 
effect : "fadeIn" 
}); 
}); 
</script>

Jquery.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张可见区域外的图片,以避免出现这个问题.

Javascript 相关文章推荐
JS结合bootstrap实现基本的增删改查功能
Jul 22 Javascript
微信小程序 参数传递详解
Oct 24 Javascript
原生js实现键盘控制div移动且解决停顿问题
Dec 05 Javascript
Angular中ng-repeat与ul li的多层嵌套重复问题
Jul 24 Javascript
如何理解Vue的render函数的具体用法
Aug 30 Javascript
小程序实现多选框功能
Oct 30 Javascript
validform表单验证的实现方法
Mar 08 Javascript
JavaScript实现汉字转换为拼音及缩写的方法示例
Mar 28 Javascript
微信小程序一周时间表功能实现
Oct 17 Javascript
基于javascript实现贪吃蛇小游戏
Nov 25 Javascript
Node Mongoose用法详解【Mongoose使用、Schema、对象、model文档等】
May 13 Javascript
JS 5种遍历对象的方式
Jun 16 Javascript
基于jQuery的倒计时插件代码
May 07 #Javascript
基于Jquery的将DropDownlist的选中值赋给label的实现代码
May 06 #Javascript
jQuery 常见操作实现方式和常用函数方法总结
May 06 #Javascript
jQuery1.6 正式版发布并提供下载
May 05 #Javascript
High Performance JavaScript(高性能JavaScript)读书笔记分析
May 05 #Javascript
jQuery bind事件使用详解
May 05 #Javascript
javascript 拖动表格行实现代码
May 05 #Javascript
You might like
Linux环境下搭建php开发环境的操作步骤
2013/06/17 PHP
PHP的AES加密算法完整实例
2016/07/20 PHP
PHP使用Redis替代文件存储Session的方法
2017/02/15 PHP
php插件Xajax使用方法详解
2017/08/31 PHP
php用wangeditor3实现图片上传功能
2019/08/22 PHP
初识JQuery 实例一(first)
2011/03/16 Javascript
JS trim去空格的最佳实践
2011/10/30 Javascript
判断js中各种数据的类型方法之typeof与0bject.prototype.toString讲解
2013/11/07 Javascript
js中一个函数获取另一个函数返回值问题探讨
2013/11/21 Javascript
JS阻止用户多次提交示例代码
2014/03/26 Javascript
基于JQuery制作可编辑的表格特效
2014/12/23 Javascript
深入了解JavaScript中的Symbol的使用方法
2015/07/28 Javascript
jquery实现的3D旋转木马特效代码分享
2015/08/25 Javascript
js强制把网址设为默认首页
2015/09/29 Javascript
基于JavaScript实现文字超出部分隐藏
2016/02/29 Javascript
JS产生随机数的用法小结
2016/12/10 Javascript
JS实现超简单的汉字转拼音功能示例
2016/12/22 Javascript
jQuery实现的点击标题文字切换字体效果示例【测试可用】
2018/04/26 jQuery
vue ssr 指南详读
2018/06/29 Javascript
vue-router 实现导航守卫(路由卫士)的实例代码
2018/09/02 Javascript
详解nodejs 开发企业微信第三方应用入门教程
2019/03/12 NodeJs
node使用mysql获取数据库数据中文乱码问题的解决
2019/12/02 Javascript
微信小程序button标签open-type属性原理解析
2020/01/21 Javascript
简单了解vue 插值表达式Mustache
2020/07/22 Javascript
vue 如何从单页应用改造成多页应用
2020/10/23 Javascript
python+opencv实现动态物体识别
2018/01/09 Python
python搜索包的路径的实现方法
2019/07/19 Python
python GUI库图形界面开发之PyQt5输入对话框QInputDialog详细使用方法与实例
2020/02/27 Python
Python Handler处理器和自定义Opener原理详解
2020/03/05 Python
python合并多个excel文件的示例
2020/09/23 Python
CSS3实现彩色进度条动画的示例
2020/10/29 HTML / CSS
美国廉价机票预订网站:Cheapfaremart
2018/04/28 全球购物
美国儿童服装、家具和玩具精品店:Maisonette
2019/11/24 全球购物
空气环保标语
2014/06/12 职场文书
2015年税务稽查工作总结
2015/05/26 职场文书
2016优秀教师先进个人事迹材料
2016/02/25 职场文书