当前位置：模板网首页 > 特效插件 > 图像特效 >  延时加载图片的js代码正文

特效介绍

延时加载图片的js代码：在做图片网站时，往往会出现，整个页面的图片同时在缓慢加载，非常不美观。本插件的作用顾名思义，先让需要显示图片的位置先加载一张小图片，等到大图完全加载完成之后再显示出来。由于本插件的图片比较小，加载可能比较快，看不出效果。在预览本插件时，请按ctrl+F5多次查看。还有，本图片延时加载插件下载到本地是没有效果的，因为图片也在本地，加载太快，看不出来。

使用方法

1、CSS样式：

<style type="text/css">
body,div,ul,li{margin:0;padding:0;}
#box{width:770px;margin:0 auto;padding:10px 0 0 10px;background:#f00;overflow:hidden;zoom:1;}
#box li{float:left;width:375px;height:225px;color:#fff;padding:10px 0;display:inline;text-align:center;margin:0 10px 10px 0;background:#000 url(images/loading.gif) 50% 50% no-repeat;}
#box li img.loaded{height:225px;vertical-align:middle;}
</style>

2、JS代码：

<script type="text/javascript">
var fgm = {
    on: function(element, type, handler) {
        return element.addEventListener ? element.addEventListener(type, handler, false) : element.attachEvent("on" + type, handler)
    },
    bind: function(object, handler) {
        return function() {
            return handler.apply(object, arguments)    
        }
    },
    pageX: function(element) {
        return element.offsetLeft + (element.offsetParent ? arguments.callee(element.offsetParent) : 0)
    },
    pageY: function(element) {
        return element.offsetTop + (element.offsetParent ? arguments.callee(element.offsetParent) : 0)    
    },
    hasClass: function(element, className) {
        return new RegExp("(^|\\s)" + className + "(\\s|$)").test(element.className)
    },
    attr: function(element, attr, value) {
        if(arguments.length == 2) {
            return element.attributes[attr] ? element.attributes[attr].nodeValue : undefined
        }
        else if(arguments.length == 3) {
            element.setAttribute(attr, value)
        }
    }
};
//延时加载
function LazyLoad(obj) {
    this.lazy = typeof obj === "string" ? document.getElementById(obj) : obj;
    this.aImg = this.lazy.getElementsByTagName("img");
    this.fnLoad = fgm.bind(this, this.load);
    this.load();
    fgm.on(window, "scroll", this.fnLoad);
    fgm.on(window, "resize", this.fnLoad);
}
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
    }
};
//应用
fgm.on(window, "load", function () {new LazyLoad("box")});
</script>

3、html代码：

<ul id="box">
    <li><img src="img/none.gif" data-img="images/1.jpg" /></li>
    <li><img src="img/none.gif" data-img="images/2.jpg" /></li>
    <li><img src="img/none.gif" data-img="images/3.jpg" /></li>
    <li><img src="img/none.gif" data-img="images/4.jpg" /></li>
    <li><img src="img/none.gif" data-img="images/5.jpg" /></li>
    <li><img src="img/none.gif" data-img="images/6.jpg" /></li>
</ul>

延时加载图片的js代码效果预览 延时加载图片的js代码本地下载