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 相关文章推荐
一个js实现的所谓的滑动门
May 23 Javascript
利用JS重写Cognos右键菜单的实现代码
Apr 11 Javascript
jQuery实现切换页面布局使用介绍
Oct 09 Javascript
基于JQuery模仿苹果桌面的Dock效果(初级版)
Oct 15 Javascript
js实现DOM走马灯特效的方法
Jan 21 Javascript
JS截取字符串实例详解
Nov 24 Javascript
基于bootstrap插件实现autocomplete自动完成表单
May 07 Javascript
AngularJS中的指令全面解析(必看)
May 20 Javascript
javascript与jquery动态创建html元素示例
Jul 25 Javascript
vue+axios+promise实际开发用法详解
Oct 15 Javascript
后台使用freeMarker和前端使用vue的方法及遇到的问题
Jun 13 Javascript
微信小程序实现定位及到指定位置导航的示例代码
Aug 20 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小偷的核心程序
2007/04/09 PHP
PHP 分页原理分析,大家可以看看
2009/12/21 PHP
PHP导出MySQL数据到Excel文件(fputcsv)
2011/07/03 PHP
深入PHP nl2br()格式化输出的详解
2013/06/05 PHP
PHP遍历目录并返回统计目录大小
2014/06/09 PHP
php构造函数与析构函数
2016/04/23 PHP
学习ExtJS table布局
2009/10/08 Javascript
JavaScript fontsize方法入门实例(按照指定的尺寸来显示字符串)
2014/10/17 Javascript
深入理解JavaScript系列(49):Function模式(上篇)
2015/03/04 Javascript
jQuery实现加入购物车飞入动画效果
2015/03/14 Javascript
在JavaScript中处理字符串之link()方法的使用
2015/06/08 Javascript
JavaScript DOM 学习总结(五)
2015/11/24 Javascript
AngularJS 与Bootstrap实现表格分页实例代码
2016/10/14 Javascript
概述如何实现一个简单的浏览器端js模块加载器
2016/12/07 Javascript
HTML的select控件美化
2017/03/27 Javascript
Webpack常见静态资源处理-模块加载器(Loaders)+ExtractTextPlugin插件
2017/06/29 Javascript
详解vue渲染从后台获取的json数据
2017/07/06 Javascript
angularjs $http调用接口的方式详解
2018/08/13 Javascript
利用hasOwnProperty给数组去重的面试题分享
2018/11/05 Javascript
react+redux仿微信聊天界面
2019/06/21 Javascript
如何对react hooks进行单元测试的方法
2019/08/14 Javascript
python查询sqlite数据表的方法
2015/05/08 Python
json跨域调用python的方法详解
2017/01/11 Python
Python基于identicon库创建类似Github上用的头像功能
2017/09/25 Python
用TensorFlow实现多类支持向量机的示例代码
2018/04/28 Python
python判断文件是否存在,不存在就创建一个的实例
2019/02/18 Python
Flask之pipenv虚拟环境的实现
2019/11/26 Python
pytorch逐元素比较tensor大小实例
2020/01/03 Python
HTML5 LocalStorage 本地存储详细概括(多图)
2017/08/18 HTML / CSS
美国经典刺绣和字母儿童服装特卖:Smocked Auctions
2018/07/16 全球购物
毕业证丢失证明
2014/01/15 职场文书
《谁的本领大》教后反思
2014/04/25 职场文书
Mysql Show Profile
2021/04/05 MySQL
使用Spring处理x-www-form-urlencoded方式
2021/11/02 Java/Android
DSP接收机前端设想
2022/04/05 无线电
使用scrapy实现增量式爬取方式
2022/06/21 Python