Jquery.LazyLoad.js修正版下载，实现图⽚延迟加载插件
从⽹上下载来的版本多多少少都有些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() {
androidstudio安卓版var ua = LowerCase();
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包⾥，⽅便以后使⽤，路径是demo.jb51/js/2011/lazyload/Js/lazyload/jquery.js。
2、改造Jquery.LazyLoad.js函数，根据浏览器版本来显⽰不同的滤镜效果：
复制代码代码如下:
var public = checkbrowse();
var showeffect = "";
jquery下载文件插件if ((public['is'] == 'msie' && public['ver'] < 8.0)) {
submit按钮点击showeffect = "show"
} else {
showeffect = "fadeIn"
}
jQuery(document).ready(function($) {
$("img").lazyload({
placeholder: "demo.jb51/js/2011/lazyload/Js/lazyload/grey.gif",
effect: showeffect,
php是一种服务器端的脚本failurelimit: 10
})
});
Jquery.LazyLoad.js使⽤⽅法：
1、将以下⽂件存放在同⼀⽬录下⾯：
jquery.js
jquery.layzload.js
grey.gif
2、在需要使⽤特效的地⽅加上如下的代码：
<script type="text/javascript" src="demo.jb51/js/2011/lazyload/Js/lazyload/jquery.js"></script>
<script type="text/javascript" src="demo.jb51/js/2011/lazyload/Js/lazyload/jquery.lazyload.js"></script>
Jquery.LazyLoad.js插件修正版下载：
lazyload.rar
下⾯对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，图⽚排序混乱时oracle查看表结构语句
failurelimit : 10,
参数:failurelimit，值为数字.lazyload默认在到第⼀张不在可见区域⾥的图⽚时则不再继续加载，但当HTML容器混乱的时候可能出现可见区域内图⽚并没加载出来的情况,failurelimit意在加载N张可见区域外的图⽚，以避免出现这个问题.
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论