图片预加载

定义：预知用户将发生的行为，提前加载用户所需要的图片。

主要表现：

• 网站loading页：添加着陆页，等需要的所有需要的图片加载完毕，一次性呈现给用户，提高用户体验。
• 局部图片的加载：表情插件
• 漫画网站

特点：

• 提前加载所需要的图片
• 更好的用户体验

分类：

• 无序加载：类似QQ表情插件，不关心加载顺序
• 有序加载：漫画网站（当用户需要查看时可直接从本地缓存中渲染以提供给用户更好的体验减少等待的时间。

使用：

1）效果

2）说明

默认显示加载百分比，等加载所有图片之后，才展示图片和切换按钮

3）代码

<div class="box">
    <img src="./upload/clubs/20190412111344_bf5cd763-c3b9-4eb4-a2d5-882adf2d033c.jpg" alt="pic" id="img">
    <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="process">0%</p>
</div>

<script>
    //图片地址 网络地址
    var imgs=[
        '网络地址1',
        '网络地址2',
        '网络地址3',
        '网络地址4',
        '网络地址5',
    ];

    var index=0;
    var len=imgs.length;
    var count=0;
    $.each(imgs,function(i,src){
        var imgObj=new Image();
        $(imgObj).on('load',function(){
            $(".process").html(parseInt(100 *(count + 1) / len )+ '%');
            if(count >=len-1){
               $(".loading").hide()            
            }
            count++

        })
        imgObj.src=src;
    })
    //点击按钮 切换图片
    $('.btn').on('click',function(){
        if($(this).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