图片预加载是非常常见的一个功能，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. 报错The sandbox is not in sync with the Podfile.lock

    clone下来的项目,运行的时候报错 diff: /../Podfile.lock: No such file or directory diff: Manifest.lock: No such fi ...

  2. 第九届蓝桥杯大赛个人赛决赛（软件类）真题Java

    更新中.......... 同一年的题解:https://www.cnblogs.com/dgwblog/p/10111903.html   01 结果填空 (满分11分) 标题:年龄问题 s夫人一向 ...

  3. 前端获取指定cookie

    前端获取指定cookie的值 function getCookie(cookiename){ var name = cookiename + "="; var cs = docum ...

  4. [CH3803] 扑克牌 （期望DP+记忆化搜索）

    [题目链接] [CH3803] 扑克牌 [题面描述] \(54\)张牌,每次随机摸一张,求得到 A张黑桃 B张红桃 C张梅花 D张方块 的期望步数．特别地,大王和小王可以当做任意一种花色,当然,会选择 ...

  5. 认识CSS中盒子模型

    前端之HTML,CSS(六) CSS 盒子模型 CSS中的重点,理解盒子模型对于CSS才能有更清晰的认识.网页说简单一点其实就是一块一块的拼接出来的,可以想象成拼图,所有图块拼接在一起就成了一幅图像. ...

  6. Ionic3，装饰器（@Input、@ViewChild）以及使用 Events 实现数据回调中的相关用法（五）

    标题栏的渐变效果 使用到的相关装饰器.Class以及相关方法:@Input.@ViewChild.Content.ionViewDidLoad ① @Input 装饰器:用来获取页面元素自定义属性值. ...

  7. springboot利用fastjson序列化输出(默认是jackson)

    在@SpringBootApplication类中添加 @Bean public HttpMessageConverters fastJsonHttpMessageConverters() { //创 ...

  8. egg

    简介 阿里的   红色的是项目名字 egg-init --type simple First && cd First  egg-init --type simple Second &a ...

  9. 通过overflow: scroll;来实现部分区域的滚动

    在移动端中,我们希望元素的滚动,可以通过一些插件的使用来实现滚动,当然也可以自己来实现. 比如:对于某一个区域,我们可以限制好高度之后,设定:overflow-y: scroll; 这样,就可以实现滚 ...

  10. LinuxShell脚本编程基础1-vi编辑器的使用

    1.输入模式与命令模式的切换 按 [Esc]键 切换到 命令模式: 2.保存与退出 :w mytest.txt 保存文件名 :q 退出 :q! 强制退出 :wq  保存并退出 3.插入文本命令 i 在 ...