图片预加载

一、图片预加载简介
二、图片预加载之无序预加载

一、图片预加载简介

图片资源很丰富一方面带给大家更好体验的同时，也降低了我们的性能，减慢了我们的加载速度

图片的预加载效果展示：

（1）网站的loading页面

（2）局部图片的加载–表情插件

（3）漫画网站

图片预加载的特点：

（1）提前加载所需要图片

（2）更好的用户体验

图片预加载分类：

1.无序预加载

不关心图片加载顺序，因为要在所有图片加载之后一次性显示出来就可以了

2.有序预加载

像那种漫画网站就是有序预加载的

二、图片预加载之无序预加载

首先看一下没使用预加载的时候的代码：

<!doctype html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8" />
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>图片预加载之无序加载</title>
    <style>
        a {
            text-decoration: none;
        }
        .box {
            text-align: center;
        }
        .btn {
            display: inline-block;
            height: 30px;
            line-height: 30px;
            border: 1px solid #ddd;
            background-color: #fff;
            padding: 0 10px;
            margin-right: 40px;
            color: #2a485d;
        }
        .btn:hover {
            background-color: #4cae4c;
        }
    </style>
</head>
<body>
    <div class="box">
        <img src="http://img07.tooopen.com/images/20170811/tooopen_sy_219898696246.jpg" alt="pic" id="img" width="300">
        <p>
            <a href="javascript:;" class="btn" data-control="prev">上一页</a>
            <a href="javascript:;" class="btn" data-control="next">下一页</a>
        </p>
    </div>
<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script>

    //图片数组
    var imgs = [
        'http://img07.tooopen.com/images/20170811/tooopen_sy_219898696246.jpg',
        'https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=810896649,3751303857&fm=11&gp=0.jpg',
        'https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=3549496778,2425390027&fm=200&gp=0.jpg',
        'https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=2129473072,572477714&fm=200&gp=0.jpg',
        'https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=1933690442,1976994698&fm=11&gp=0.jpg'
    ];

    var index = 0,
        len = imgs.length

    $('.btn').on('click',function () {
        if($(this).attr('data-control') === 'prev') {
            //上一张
            index = Math.max(0,--index);
        }else {
            index = Math.min(len - 1,++index);
        }
        document.title = (index + 1) + '/' + len;
        $('#img').attr('src',imgs[index])
    })

</script>
</body>
</html>

上面的图片在点击下一页的时候有可能出现假死的状况，用户体验很不好

那我们使用图片预加载方式来加载我们的图片，图片预加载其实是利用了img对象，通过new Image()来实例化img对象，img对象是有两个事件的，一个是当我们的图片正常被加载完成之后会 触发load事件，那如果图片没有正常完成加载呢就会触发error事件，就是报一个错误

上图片预加载代码：

<!doctype html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8" />
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>图片预加载之无序加载</title>
    <style>
        html,body {
            height: 100%;
        }
        a {
            text-decoration: none;
        }
        .box {
            text-align: center;
        }
        .btn {
            display: inline-block;
            height: 30px;
            line-height: 30px;
            border: 1px solid #ddd;
            background-color: #fff;
            padding: 0 10px;
            margin-right: 40px;
            color: #2a485d;
        }
        .btn:hover {
            background-color: #4cae4c;
        }
        .loading {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: #ddd;
            text-align: center;
            font-size: 30px;
            color: white;
        }
        .progress {
            margin-top: 300px;
        }
    </style>
</head>
<body>
    <div class="box">
        <img src="http://img07.tooopen.com/images/20170811/tooopen_sy_219898696246.jpg" alt="pic" id="img" width="300">
        <p>
            <a href="javascript:;" class="btn" data-control="prev">上一页</a>
            <a href="javascript:;" class="btn" data-control="next">下一页</a>
        </p>
    </div>
    <div class="loading">
        <p class="progress">0%</p>
    </div>
<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script>

    //图片数组
    var imgs = [
        'http://img07.tooopen.com/images/20170811/tooopen_sy_219898696246.jpg',
        'https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=810896649,3751303857&fm=11&gp=0.jpg',
        'https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=3549496778,2425390027&fm=200&gp=0.jpg',
        'https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=2129473072,572477714&fm=200&gp=0.jpg',
        'https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=1933690442,1976994698&fm=11&gp=0.jpg'
    ];

    var index = 0,
        len = imgs.length,
        count = 0,
        progress = $('.progress');

    $.each(imgs,function (i,src) {
        var imgObj = new Image();

        imgObj.src = src;

        $(imgObj).on('load err',function () {
            progress.html(Math.round((count + 1) / len * 100) + '%');

            if(count >= len -1){
                $('.loading').hide();
                document.title = '1/' + len
            }

            count++;
        })
    })

    $('.btn').on('click',function () {
        if($(this).attr('data-control') === 'prev') {
            //上一张
            index = Math.max(0,--index);
        }else {
            index = Math.min(len - 1,++index);
        }
        document.title = (index + 1) + '/' + len;
        $('#img').attr('src',imgs[index])
    })


</script>
</body>
</html>

注意:

var imgObj = new Image();

imgObj.src = src;

$(imgObj).on(‘load err‘,function () {

为什么要把err也放进去了呢，因为当我们如果err了，不放进去的话就不会再执行loading进度，那么那个进度条将一直显示

将无序预加载写成jQuery插件

Better me

一、图片预加载简介

二、图片预加载之无序预加载