首先非常感谢网友良人未归的无私分享，此特效是一款非常实用的功能，它是一款用原创JS代码实现的图片预加载插件，代码非常简洁，使用很简单，调用的时候只写一行代码就可以了，fgm.on(window, "load", function () {new LazyLoad("box")});
效果如下：
核心代码如下：
LazyLoad.prototype = {
load: function() {
var iScrollTop = document.documentElement.scrollTop || document.body.scrollTop;
var iClientHeight = document.documentElement.clientHeight + iScrollTop;
var i = 0;
var aParent = [];
var oParent = null;
var iTop = 0;
var iBottom = 0;
var aNotLoaded = this.loaded(0);
if(this.loaded(1).length != this.aImg.length) {
for(i = 0; i < aNotLoaded.length; i++) {
oParent = aNotLoaded[i].parentElement || aNotLoaded[i].parentNode;
iTop = fgm.pageY(oParent);
iBottom = iTop + oParent.offsetHeight;
if((iTop > iScrollTop && iTop < iClientHeight) || (iBottom > iScrollTop && iBottom < iClientHeight)) {
aNotLoaded[i].src = fgm.attr(aNotLoaded[i], "data-img") || aNotLoaded[i].src;
aNotLoaded[i].className = "loaded";
}
}
}
},
loaded: function(status) {
var array = [];
var i = 0;
for(i = 0; i < this.aImg.length; i++)
eval("fgm.hasClass(this.aImg[i], \"loaded\")" + (!!status ? "&&" : "||") + "array.push(this.aImg[i])");
return array
}
};
如果您觉得本作品对您的学习有所帮助：
关键字：
图片特效 图片预加载 图片延迟加载 网友良人未归