javascript图片预加载

浏览数：21 / 时间：2015年06月08日

图片预加载是非常常见的一个功能，PC和移动端都会用到，尤其是在移动端，只要涉及到较多图片的加载都会用到该技术。下面是移动端用到的，引入了zepto。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Lazyload</title>
    <style type="text/css">
        *{margin:0;padding:0;}
        .img-wrap{width:100%;overflow: hidden;background-repeat: no-repeat;background-size: cover;}
        .img-wrap img{width:100%;}
    </style>
</head>
<body>
<div class="lazyload-wrap">
    <div class="img-wrap">
        <img class="util-lazyload" data-origin="images/img1.jpg" src="images/placehold.png"/>
    </div>
    <div class="img-wrap">
        <img class="util-lazyload" data-origin="images/img1.jpg" src="images/placehold.png"/>
    </div>
    <div class="img-wrap">
        <img class="util-lazyload" data-origin="images/img1.jpg" src="images/placehold.png"/>
    </div>
    <div class="img-wrap">
        <img class="util-lazyload" data-origin="images/img1.jpg" src="images/placehold.png"/>
    </div>
    <div class="img-wrap">
        <img class="util-lazyload" data-origin="images/img1.jpg" src="images/placehold.png"/>
    </div>
    <div class="img-wrap">
        <img class="util-lazyload" data-origin="images/img1.jpg" src="images/placehold.png"/>
    </div>
    <div class="img-wrap">
        <img class="util-lazyload" data-origin="images/img1.jpg" src="images/placehold.png"/>
    </div>
    <div class="img-wrap">
        <img class="util-lazyload" data-origin="images/img1.jpg" src="images/placehold.png"/>
    </div>
    <div class="img-wrap">
        <img class="util-lazyload" data-origin="images/img1.jpg" src="images/placehold.png"/>
    </div>
    <div class="img-wrap">
        <img class="util-lazyload" data-origin="images/img1.jpg" src="images/placehold.png"/>
    </div>
    <div class="img-wrap">
        <img class="util-lazyload" data-origin="images/img1.jpg" src="images/placehold.png"/>
    </div>
    <div class="img-wrap">
        <img class="util-lazyload" data-origin="images/img1.jpg" src="images/placehold.png"/>
    </div>
</div>
    <script type="text/javascript" src="script/zepto.min.js"></script>
    <script type="text/javascript" src="script/lazyload.js"></script>
</body>
</html>

lazyload.js:

var lazyload = function(container) {
    var lazyClsName = "util-lazyload";//图片样式名
    var $container = container;
    var threshold = 1;
    //获取容器下面需要懒加载的元素
    function getLazyElements(container) {
        return $container.find("." + lazyClsName);
    }
    //浏览器滚动轴滚动
    var handleScroll = function() {
        var elements = getLazyElements(container);
        elements.each(function() {
            if (!belowTheFold($(this))) {
                $(this).trigger("appear");
            }
        });
        for (var i = 0, length = elements.length; i < length; i++) {
            if (elements[i].loaded === true) {
                $(elements[i]).removeClass(lazyClsName);
            }
        }
    };
    if ($container.data("lazyload") !== true) {
        $(window).on(‘scroll‘, handleScroll);
        $container.on("appear", "." + lazyClsName, function(e) {
            var target = e.target;
            if (target.loaded !== true) {
                preload($(target));
                target.loaded = true;
            }
        });
        $(container).data(‘lazyload‘, true);
    }
    //图片预加载
    function preload(element) {
        var img = document.createElement(‘img‘),
            src = element.attr(‘data-origin‘);
        $(img).bind("load", function() {
                element.parent().css(‘backgroundImage‘, ‘url(‘ + src + ‘)‘);
                element.css(‘visibility‘, ‘hidden‘);
            })
            .bind(‘error‘, function() {
                $self.css(‘visibility‘, ‘visible‘);
            })
            .attr("src", src);
    }
    //判断是否在可视区域
    function belowTheFold(element, threshold) {
        var fold = window.innerHeight + window.scrollY;
        return fold <= $(element).offset().top;
    }
    
    /* Force initial check if images should appear. */
    setTimeout(handleScroll, 0);
    return $(container);
};
lazyload($(".lazyload-wrap"));