zoukankan html css js c++ java

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{100%;overflow: hidden;background-repeat: no-repeat;background-size: cover;}
        .img-wrap img{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"));

查看全文

相关阅读:
PHP7 网络编程（六）Socket和IO多路复用【待】
PHP7 网络编程（五）进程间通信【待】
PHP7 网络编程（四）signal信号【待】
PHP7 网络编程（三）孤儿进程与僵尸进程
 PHP7 网络编程（二）daemon守护进程
 PHP7 网络编程（一）多进程初探
 为什么要用Rust取代C/C ++重写Python底层？
Modern Self-Service Data Platforms
一文读懂量化系统接入及相关平台
 rust asynchronous io：从 mio 到 coroutine

原文地址：https://www.cnblogs.com/hutuzhu/p/4315952.html