Jquery.LazyLoad.js修正版下载,实现图片延迟加载插件


Posted in Javascript onMarch 12, 2011

从网上下载来的版本多多少少都有些BUG,尤其是加载后在IE6和IE7下图片闪动是个大问题,在网上查了很久,也没有找到相关的解决方案。没解决方案,就得发挥咱DIY的精神,自己想法解决,分析了BUG,理了理思路,结合前段时间我做弹出窗口特效的方法,解决了Jquery.LazyLoad.js的兼容问题,现将思路和方法与大家分享一下。

解决思路大致是两点,一是从LazyLoad本身的滤镜参数下手,发现有一个参数在IE6和IE7是可以用的,就是show,那么在IE6和IE7下用这个特效;二是IE8以上(包括IE8)、FireFox,Chrome等非IE核心的浏览器对fadeIn特效都支持,那么在这些版本的浏览器中就使用这种酷酷的特效。

思路出来了,就想办法解决:

1、首先用JQ判断浏览器类型及版本,如果是IE8以下的浏览器就用effect=show,否则就用effect=fadeIn,判断浏览器版本函数如下:

function checkbrowse() { 
var ua = navigator.userAgent.toLowerCase(); 
var is = (ua.match(/\b(chrome|opera|safari|msie|firefox)\b/) || ['', 'mozilla'])[1]; 
var r = '(?:' + is + '|version)[\\/: ]([\\d.]+)'; 
var v = (ua.match(new RegExp(r)) || [])[1]; 
jQuery.browser.is = is; 
jQuery.browser.ver = v; 
return { 
'is': jQuery.browser.is, 
'ver': jQuery.browser.ver 
} 
}

我是将以上的代码加入了JQ包里,方便以后使用,路径是http://demo.3water.com/js/2011/lazyload/Js/lazyload/jquery.js。

2、改造Jquery.LazyLoad.js函数,根据浏览器版本来显示不同的滤镜效果:

var public = checkbrowse(); 
var showeffect = ""; 
if ((public['is'] == 'msie' && public['ver'] < 8.0)) { 
showeffect = "show" 
} else { 
showeffect = "fadeIn" 
} 
jQuery(document).ready(function($) { 
$("img").lazyload({ 
placeholder: "http://demo.3water.com/js/2011/lazyload/Js/lazyload/grey.gif", 
effect: showeffect, 
failurelimit: 10 
}) 
});

Jquery.LazyLoad.js使用方法:
1、将以下文件存放在同一目录下面:
jquery.js
jquery.layzload.js
grey.gif
2、在需要使用特效的地方加上如下的代码:
<script type="text/javascript" src="http://demo.3water.com/js/2011/lazyload/Js/lazyload/jquery.js"></script>
<script type="text/javascript" src="http://demo.3water.com/js/2011/lazyload/Js/lazyload/jquery.lazyload.js"></script>

Jquery.LazyLoad.js插件修正版下载:
lazyload.rar
Jquery.LazyLoad.js插件参数详解:
下面对LazyLoad插件的一些参数进行说明,供使用者做出更贴切的效果。

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面象对象设计
Apr 28 Javascript
15个款优秀的 jQuery 图片特效插件推荐
Nov 21 Javascript
用Javascript来生成ftp脚本的小例子
Jul 03 Javascript
jQuery扁平化风格下拉框美化插件FancySelect使用指南
Feb 10 Javascript
EasyUI实现二级页面的内容勾选的方法
Mar 01 Javascript
jQuery实现手机版页面翻页效果的简单实例
Oct 05 Javascript
微信小程序 textarea 组件详解及简单实例
Jan 10 Javascript
js实现日历与定时器
Feb 22 Javascript
详解vue添加删除元素的方法
Jun 30 Javascript
vue-cli3项目升级到vue-cli4 的方法总结
Mar 19 Javascript
vue实现简单跑马灯效果
May 25 Javascript
keep-alive保持组件状态的方法
Dec 02 Javascript
javascript textarea光标定位方法(兼容IE和FF)
Mar 12 #Javascript
JavaScript全局函数使用简单说明
Mar 11 #Javascript
js+css使DIV始终居于屏幕中间 左下 左上 右上 右下的代码集合
Mar 10 #Javascript
始终在屏幕中间显示Div的代码(css+js)
Mar 10 #Javascript
javascript的函数、创建对象、封装、属性和方法、继承
Mar 10 #Javascript
在jQuery 1.5中使用deferred对象的代码(翻译)
Mar 10 #Javascript
基于Jquery的跨域传输数据(JSONP)
Mar 10 #Javascript
You might like
php三维数组去重(示例代码)
2013/11/26 PHP
JavaScript学习笔记(十七)js 优化
2010/02/04 Javascript
一个轻量级的javascript库 pj介绍
2010/12/19 Javascript
javascript制作坦克大战全纪录(1)
2014/11/27 Javascript
PHP实现的各种中文编码转换类分享
2015/01/23 Javascript
jquery控制表单输入框显示默认值的方法
2015/05/22 Javascript
js实现增加数字显示的环形进度条效果
2017/02/05 Javascript
微信小程序 实例开发总结
2017/04/26 Javascript
Bootstrap模态框插件使用详解
2017/05/11 Javascript
element-ui循环显示radio控件信息的方法
2018/08/24 Javascript
AngularJS 监听变量变化的实现方法
2018/10/09 Javascript
详解JavaScript中的强制类型转换
2019/04/15 Javascript
layui实现把数据表格时间戳转换为时间格式的例子
2019/09/12 Javascript
解决Vue + Echarts 使用markLine标线(precision精度问题)
2020/07/20 Javascript
[04:17]DOTA2完美盛典,rOtk、BurNIng携手巴图演唱《倔强》
2017/11/28 DOTA
[01:02:45]完美世界DOTA2联赛 LBZS vs Forest 第三场 11.07
2020/11/09 DOTA
把MySQL表结构映射为Python中的对象的教程
2015/04/07 Python
python获取mp3文件信息的方法
2015/06/15 Python
Python通过RabbitMQ服务器实现交换机功能的实例教程
2016/06/29 Python
Python爬取附近餐馆信息代码示例
2017/12/09 Python
浅谈python数据类型及类型转换
2017/12/18 Python
python中的二维列表实例详解
2018/06/19 Python
Django中多种重定向方法使用详解
2019/07/17 Python
opencv-python 提取sift特征并匹配的实例
2019/12/09 Python
Python 求向量的余弦值操作
2021/03/04 Python
幼儿园中秋节活动方案2013
2014/01/29 职场文书
幼儿园元旦活动感言
2014/03/02 职场文书
抵押贷款承诺书
2014/05/30 职场文书
趣味运动会策划方案
2014/06/02 职场文书
2014学习优秀共产党员先进事迹材料思想汇报
2014/09/14 职场文书
2015年世界艾滋病日活动总结
2015/03/24 职场文书
养成教育工作总结
2015/08/13 职场文书
2019新员工心得体会
2019/06/25 职场文书
领导激励员工的演讲稿,各种会上用得到,建议收藏
2019/08/13 职场文书
Mysql Show Profile
2021/04/05 MySQL
详解Java实践之适配器模式
2021/06/18 Java/Android