针对JQuery.LazyLoad.js在IE6和IE7浏览器中加载后图片出现闪动的兼容性问题，本文提供了一种修复思路。通过检测浏览器版本，在IE8以下版本使用show特效，而在现代浏览器中使用fadeIn特效，从而解决兼容性问题并提升用户体验。
问题背景与解决思路
从网络获取的插件版本往往存在一定缺陷，特别是在IE6和IE7环境下，图片加载完成后会出现明显的闪烁现象。经过长时间的搜索，并未找到现成的解决方案，因此需要自主研究。通过分析Bug产生的原因，梳理解决思路，并结合之前处理弹出窗口特效的经验，成功解决了JQuery.LazyLoad.js的兼容性问题，现将具体的解决思路和方法分享如下。
解决该问题的核心思路包含两个方面：首先，深入分析LazyLoad插件的滤镜参数，发现其中有一个参数在IE6和IE7环境中是有效的，即show特效，因此在这些旧版IE浏览器中采用此特效；其次，对于IE8及以上版本（含IE8）以及Firefox、Chrome等非IE内核的浏览器，它们均支持fadeIn特效，因此在这些浏览器中启用该效果，以获得更佳的视觉体验。
思路明确后，需寻求解决方案：
第一步，利用jQuery判断当前浏览器的类型及版本号。如果检测到是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
}
} 我将上述代码整合进了jQuery库文件中，以便后续项目直接调用，该文件的引用路径为http://demo.jb51.net/js/2011/lazyload/Js/lazyload/jquery.js。
第二步，对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.jb51.net/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.jb51.net/js/2011/lazyload/Js/lazyload/jquery.js"></script>
<script type="text/javascript" src="http://demo.jb51.net/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，值为jQuery选择的容器对象。LazyLoad默认在浏览器滚动条滚动时生效，通过设置此参数，可以实现当特定DIV容器的滚动条滚动时，依次加载其中的图片。
6、处理图片排序混乱的情况
failurelimit : 10,
参数说明：failurelimit，值为数字。LazyLoad默认在找到第一张不在可见区域内的图片时停止继续加载。但当HTML结构较为混乱时，可能出现可见区域内的图片并未被加载的情况。设置failurelimit意在尝试加载N张可见区域外的图片，以避免因结构混乱导致的加载失败问题。