基于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 相关文章推荐
JavaScript EasyPager 分页函数
May 25 Javascript
jquery模拟按下回车实现代码
Sep 20 Javascript
Struts2的s:radio标签使用及用jquery添加change事件
Apr 08 Javascript
JS获取农历日期具体实例
Nov 14 Javascript
javascript实现瀑布流自适应遇到的问题及解决方案
Jan 28 Javascript
jQuery实现腾讯信用界面(自制刻度尺)样式
Aug 15 jQuery
详解layui中的树形关于取值传值问题
Jan 16 Javascript
layui之select的option叠加问题的解决方法
Mar 08 Javascript
Electron-vue脚手架改造vue项目的方法
Oct 22 Javascript
vue微信分享的实现(在当前页面分享其他页面)
Apr 16 Javascript
vue组件间的参数传递实例详解
Apr 26 Javascript
JS+HTML实现自定义上传图片按钮并显示图片功能的方法分析
Feb 12 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
通过table标签,PHP输出EXCEL的实现方法
2013/07/24 PHP
Mac OS下配置PHP+MySql环境
2015/02/25 PHP
PHP获取Exif缩略图的方法
2015/07/13 PHP
PHP使用mongoclient简单操作mongodb数据库示例
2019/02/08 PHP
Laravel 中创建 Zip 压缩文件并提供下载的实现方法
2019/04/02 PHP
javascript 动态调整图片尺寸实现代码
2009/12/28 Javascript
精心挑选的15款优秀jQuery 本特效插件和教程
2012/08/06 Javascript
Jquery写一个鼠标拖动效果实现原理与代码
2012/12/24 Javascript
Js实现双击鼠标自动滚动屏幕的示例代码
2013/12/14 Javascript
JS控件ASP.NET的treeview控件全选或者取消(示例代码)
2013/12/16 Javascript
js读写cookie实现一个底部广告浮层效果的两种方法
2013/12/29 Javascript
js中settimeout方法加参数
2014/02/28 Javascript
js脚本获取webform服务器控件的方法
2014/05/16 Javascript
js+canvas绘制矩形的方法
2016/01/28 Javascript
使用jQuery判断Div是否在可视区域的方法 判断div是否可见
2016/02/17 Javascript
使用JS实现图片展示瀑布流效果的实例代码
2016/09/12 Javascript
Bootstrap CSS组件之面包屑导航(breadcrumb)
2016/12/17 Javascript
jQuery展示表格点击变色、全选、删除
2017/01/05 Javascript
node.js实现复制文本到剪切板的功能
2017/01/23 Javascript
基于JavaScript实现轮播图原理及示例
2020/04/10 Javascript
基于JQuery的购物车添加删除以及结算功能示例
2017/03/08 Javascript
Vue.js如何优雅的进行form validation
2017/04/07 Javascript
jQuery遮罩层实例讲解
2017/05/11 jQuery
nodejs 简单实现动态html的方法
2018/05/12 NodeJs
vue基础知识--axios合并请求和slot
2020/06/04 Javascript
js实现淘宝浏览商品放大镜功能
2020/10/28 Javascript
Pyramid Mako模板引入helper对象的步骤方法
2013/11/27 Python
Python实现简单过滤文本段的方法
2017/05/24 Python
Python字符编码与函数的基本使用方法
2017/09/30 Python
利用Python在一个文件的头部插入数据的实例
2018/05/02 Python
使用Python为中秋节绘制一块美味的月饼
2019/09/11 Python
python合并多个excel文件的示例
2020/09/23 Python
Moss Bros官网:英国排名第一的西装店
2020/02/26 全球购物
编写一个 C 函数,该函数在一个字符串中找到可能的最长的子字符串,且该字符串是由同一字符组成的
2015/07/23 面试题
2014年高二班主任工作总结
2014/12/16 职场文书
Rust中的Struct使用示例详解
2022/08/14 Javascript