图片预加载是非常常见的一个功能，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. 在iOS7中修改键盘Return键的类型

    今天将之前运行在iOS7之前的一段代码拿出来,在iOS7的机器上运行,发现键盘上的ReturnKeyType不能被修改了. 经过几番查找资料,了解到iOS7中UISearchBar的结构发生了变化,将 ...

  2. c语言-勒让德多项式求解+时间测定

    #include<iostream>#include<ctime>#include<cstdlib>using namespace std; float LRD(i ...

  3. jquery 实现动画效果（各种方法）

    1.show()和hide()和toggle()(这是show和hide的一个综合,一个按钮就实现显示和隐藏) 效果: 代码: <button type="button" c ...

  4. mysql 2006 go away 错误

    https://blog.csdn.net/yypsober/article/details/71330673 原文地址.

  5. 神奇的树上启发式合并 (dsu on tree)

    参考资料 https://www.cnblogs.com/zhoushuyu/p/9069164.html https://www.cnblogs.com/candy99/p/dsuontree.ht ...

  6. 删除centos 7 系统自带的 openjdk

    1.  查看是否系统自带openjdk. java -version 2. 查看jdk位置 rpm -qa | grep java 3. 删除jdk rpm -e --nodeps java--ope ...

  7. 使用FCM服务

    1.建谷歌账号 2.在console上新建应用 https://console.firebase.google.com 并下载私钥.json 3.创建测试网页应用 (或app应用) C#服务端: 用H ...

  8. js map()初步学习

    //array.map(callback,thisObject?),callback需要有return值 //map:'映射' 被映射成新的数组  eg1: let data = [3,4,2]; l ...

  9. python+selenium打开浏览器

    Firefox(高版本要安装换火狐驱动,47版本以下可不安装) GoogleChrome(需要安装浏览器的驱动插件,驱动到selenium官网下载,目前该浏览器的驱动只有32位的,所以Google安装 ...

  10. 2016424王启元 Exp3免杀原理与实现

    基础问题回答 1.杀软是如何检测出恶意代码的? (1)基于特征码的检测 特征码是能识别一个程序是一个病毒的一段不大于64字节的特征串.如果一个可执行文件包含这样的特征码则被杀毒软件检测为是恶意代码. ...