图片预加载是非常常见的一个功能，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="data:images/placehold.png"/>

    </div>

    <div class="img-wrap">

        <img class="util-lazyload" data-origin="images/img1.jpg" src="data:images/placehold.png"/>

    </div>

    <div class="img-wrap">

        <img class="util-lazyload" data-origin="images/img1.jpg" src="data:images/placehold.png"/>

    </div>

    <div class="img-wrap">

        <img class="util-lazyload" data-origin="images/img1.jpg" src="data:images/placehold.png"/>

    </div>

    <div class="img-wrap">

        <img class="util-lazyload" data-origin="images/img1.jpg" src="data:images/placehold.png"/>

    </div>

    <div class="img-wrap">

        <img class="util-lazyload" data-origin="images/img1.jpg" src="data:images/placehold.png"/>

    </div>

    <div class="img-wrap">

        <img class="util-lazyload" data-origin="images/img1.jpg" src="data:images/placehold.png"/>

    </div>

    <div class="img-wrap">

        <img class="util-lazyload" data-origin="images/img1.jpg" src="data:images/placehold.png"/>

    </div>

    <div class="img-wrap">

        <img class="util-lazyload" data-origin="images/img1.jpg" src="data:images/placehold.png"/>

    </div>

    <div class="img-wrap">

        <img class="util-lazyload" data-origin="images/img1.jpg" src="data:images/placehold.png"/>

    </div>

    <div class="img-wrap">

        <img class="util-lazyload" data-origin="images/img1.jpg" src="data:images/placehold.png"/>

    </div>

    <div class="img-wrap">

        <img class="util-lazyload" data-origin="images/img1.jpg" src="data: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"));

javascript图片预加载的更多相关文章

  1. Javascript图片预加载详解

    预加载图片是提高用户体验的一个很好方法.图片预先加载到浏览器中,访问者便可顺利地在你的网站上冲浪,并享受到极快的加载速度.这对图片画廊及图片占据很大比例的网站来说十分有利,它保证了图片快速.无缝地发布 ...

  2. Javascript图片预加载详解 分类： JavaScript HTML+CSS 2015-05-29 11:01 768人阅读 评论(0) 收藏

    预加载图片是提高用户体验的一个很好方法.图片预先加载到浏览器中,访问者便可顺利地在你的网站上冲浪,并享受到极快的加载速度.这对图片画廊及图片占据很大比例的网站来说十分有利,它保证了图片快速.无缝地发布 ...

  3. 再谈javascript图片预加载技术

    图片预加载技术的典型应用: 如lightbox方式展现照片,无疑需要提前获得大图的尺寸,这样才能居中定位,由于javascript无法获取img文件头数据,必须等待其加载完毕后才能获取真实的大小然后展 ...

  4. javascript 图片预加载

    <!DOCTYPE > <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta ...

  5. 利用CSS、JavaScript及Ajax实现图片预加载的三大方法

    预加载图片是提高用户体验的一个很好方法.图片预先加载到浏览器中,访问者便可顺利地在你的网站上冲浪,并享受到极快的加载速度.这对图片画廊及图片占据很大比例的网站来说十分有利,它保证了图片快速.无缝地发布 ...

  6. javascript图片懒加载与预加载的分析

    javascript图片懒加载与预加载的分析 懒加载与预加载的基本概念.  懒加载也叫延迟加载:前一篇文章有介绍:JS图片延迟加载 延迟加载图片或符合某些条件时才加载某些图片. 预加载:提前加载图片, ...

  7. 利用CSS、JavaScript及Ajax实现图片预加载的三大方法(转)

    预加载图片是提高用户体验的一个很好方法.图片预先加载到浏览器中,访问者便可顺利地在你的网站上冲浪,并享受到极快的加载速度.这对图片画廊及图片占据很大比例的网站来说十分有利,它保证了图片快速.无缝地发布 ...

  8. Javascript兑现图片预加载【回调函数，多张图片】 (转载)

    Javascript实现图片预加载[回调函数,多张图片] 使用JS实现一组图片动画效果或者使用HTML5 Canvas渲染一系列图片等案例中,需要图片全部加载完成方可运行动画效果.此时程序中就会涉及多 ...

  9. 利用CSS、JavaScript及Ajax实现图片预加载的三大方法及优缺点分析

    预加载图片是提高用户体验的一个很好方法.图片预先加载到浏览器中,访问者便可顺利地在你的网站上冲浪,并享受到极快的加载速度.这对图片画廊及图片占据很大比例的网站来说十分有利,它保证了图片快速.无缝地发布 ...

随机推荐

  1. Windows下Jmeter安装出现Not able to find Java executable or version问题解决方案

    安装好java1.8.jmeter4.0,并java -version正常,jmeter也能正常使用.某一次使用突然出现Not able to find Java executable or vers ...

  2. 性能分析工具VisualVM for eclipse安装过程总结

    Java VisualVM Java VisualVM is a tool that provides a visual interface for viewing detailed informat ...

  3. iOS hook原理

    OC中的method其实是一个结构体 struct objc_method{ SEL method_name char *method_types IMP method_imp } SEL是方法名,I ...

  4. 关于java编译

    1.不包括jar编译 javac -cp %CLASSPATH% -d ./classes/ ./src/org/csource/common/*.java --先编译基础模块,并且指定class保存 ...

  5. Oracle分析函数、窗口函数简单记录汇总

    一.分析函数.窗口函数一般形式 1.分析函数的形式分析函数带有一个开窗函数over(),包含三个分析子句:分组(partition by), 排序(order by), 窗口(rows) ,他们的使用 ...

  6. 20190430-Bootstrap之旅

    写在前面的乱七八糟的前言:当当当,现在是早上9:06,emmm是我是我还是我,(*╹▽╹*)今天讲讲BT这个磨人的小妖精,为什么说磨人呢,因为用的好就不磨人了啊~咳咳就跟我女盆友一样┓( ´∀` )┏ ...

  7. oracle12c之三 控制PDB中CPU 资源使用

      CPU资源隔离 数据库中,不同的PDB对主机CPU资源使用要求不同,那么我们就可以使用CDB resourceplans来管理不同pdb对CPU资源的使用. CDB Resource Plans ...

  8. @media响应式布局

    @media可以根据屏幕尺寸调节布局 @media screen and (min-width:100px) and (max-width:200px){ div { color:red; } } 在 ...

  9. $bzoj1019-SHOI2008$ 汉诺塔 $dp$

    题面描述 汉诺塔由三根柱子(分别用\(A\ B\ C\)表示)和\(n\)个大小互不相同的空心盘子组成.一开始\(n\)个盘子都摞在柱子\(A\)上,大的在下面,小的在上面,形成了一个塔状的锥形体. ...

  10. 关于DES加密

    数据加密算法(Data Encryption Algorithm,DEA)是一种对称加密算法,很可能是使用最广泛的密钥系统,特别是在保护金融数据的安全中,最初开发的DEA是嵌入硬件中的.通常,自动取款 ...