javascript图片预加载

最新推荐文章于 2025-09-13 09:06:35 发布

转载最新推荐文章于 2025-09-13 09:06:35 发布 · 68 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/hutuzhu/p/4315952.html

文章标签：

#javascript #ViewUI

本文介绍了一种用于移动端的图片懒加载技术实现方案，利用Zepto库进行开发，并提供了具体的HTML和JavaScript代码示例。

图片预加载是非常常见的一个功能，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"));