图片预加载是非常常见的一个功能，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. 经典排序的python实现

    具体原理我这里就不解释了,可以查看数据结构课本或者百度百科 这里只给出相应的代码(很简洁) 1 __author__ = "WSX" class sort: def __init_ ...

  2. anaconda安装出现failed to create anacoda menue

    1.卸载Anaconda后重新安装Anaconda出现各种问题,粗暴解决方式:直接将安装目录放在C盘主路径下,完美解决. 2.然后无选择忽略,忽略,忽略,提示安装成功,依旧没有 菜单 进入 cmd,找 ...

  3. 实现微信小程序支付

    1.在小程序中获取用户的登录信息,成功后可以获取到用户的code值 2.把code值传给服务端,服务端请求微信获取用户openid接口,成功后可以获取用户的openid值 3.服务器上面请求微信的统一 ...

  4. Webpack的详细配置，[Webpack中各种loader的安装配置]

    在使用webpack的时候,你是不是被以下这种报错所困扰: 注意看 黄色框中标注的 You may need an appropriate loader to handle this file typ ...

  5. JWT（Json Web Token）初探与实践

    前言什么是JWT?为什么使用JWT?什么时候使用JWT?JWT的基本结构HeaderPayloadSignature将他们放在一起项目实践JWT后端前端关于安全性总结参考 协议标准:https://t ...

  6. python中函数参数传递的几种方法

    转自  http://www.douban.com/note/13413855/ Python中函数参数的传递是通过“赋值”来传递的.但这条规则只回答了函数参数传递的“战略问题”,并没有回答“战术问题 ...

  7. UML 依赖\泛化\关联\实现\聚合\组合的 Java实现

    在类图中,类与类之间的关系主要有一下几种: 泛化关系:(就是继承) public class Employee { } public class SaleEmployee extends Employ ...

  8. C 标准库 - string.h之strlen使用

    strlen Returns the length of the C string str. The length of a C string is determined by the termina ...

  9. 关于DeferredResult的思考

    使用SpringBoot搭建web程序,里面内置了tomcat,一般都不会关心内部实现机制,上来就可以写程序,并且可以跑起来.但是是思考了每次的请求是如何工作的. 简单的来讲就是tomcat是将每次请 ...

  10. bzoj 4161: Shlw loves matrixI

    Description 给定数列 {hn}前k项,其后每一项满足 hn = a1h(n-1) + a2h(n-2) + ... + ak*h(n-k) 其中 a1,a2...ak 为给定数列.请计算 ...