图片预加载是非常常见的一个功能，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. HTML-★★★★★JavaScritp简介与语法★★★★★

    简介: 1.什么是JavaScript? 它是个脚本语言,作用是使 HTML 页面具有更强的动态和交互性,它需要有宿主文件,它的宿主文件就是html文件.  JavaScript 是 Web 的编程语 ...

  2. MySQL压缩版Windows环境进行安装配置

    MySQL下载地址:https://dev.mysql.com/downloads/mysql/ 选择对应的系统和相应的版本后点击Download进入下载页面,不需要登录,点击下面的“No thank ...

  3. dw cs6设置字体样式

    1 编辑->首选参数->字体 改代码试图的字体和大小.点确定即可.

  4. squid的简单介绍

    squid的简单介绍 squid的概念 squid是一种用来缓存Internet数据的软件.接受来自人们需要下载的目标(object)的请求并适当的处理这些请求.也就是说,如果一个人想下载一web界面 ...

  5. CSS定位属性

                  定位属性                                                              position属性 1.      s ...

  6. thinkphp5.0升级

    之前一些项目是thinkphp5.0的版本.这个版本是有严重漏洞的.根据官方建议会把Request.php下面的 method方法做一个替换.但是实际上为了安全最好是做一个升级.首先必须要先做一个备份 ...

  7. ifconfig无输出的原因及解决办法

    问题 执行 ifconfig 命令无任何报错,也无任何输出信息 [root@linuxprobe ~]#  ifconfig[root@linuxprobe ~]# 排错 1. 检查PATH变量 [r ...

  8. 小众软件：windows 系统下 exe 文件打包软件

    1. Enigma Virtual Box 单文件打包软件 官网:EnigmaProtection 2. 安装包打包软件 官网:Inno Setup 参考文献: [1] 单文件制作工具Enigma V ...

  9. C#文件上传编码乱码

    又遇到文件编码乱码的事情,这回稍微有些头绪,但是还是花了很多时间去解决. 场景:上传csv文件,导入到数据库.上传文件的编码不定,需要转成unicode存储. 问题点:需要解决判断上传文件的编码. 关 ...

  10. vue-router学习

    JS push goTo(){ , postId: ' }}) } router.js // 动态路径参数 以冒号开头 { path: '/user/:id', component: User } { ...