图片的预加载之无序加载

当页面中图片很多的情况下，如果不做图片预加载，在图片没加载出来之前去访问，那用户看到的就是一片空白，影响用户体验，

这个时候图片预加载就非常重要了。

在进入主体页面之前先做一个loading出来，显示图片加载进度，加载完毕了再进入实际页面。

代码如下：

HTML

<div class="box">
    <img src="http://pic29.photophoto.cn/20131231/0046043373506387_b.jpg" id="img" width="800px">

<p>
    　　<a href="javascript:;" class="btn" data-control="prev">上一页</a>
    　　<a href="javascript:;" class="btn" data-control="next">下一页</a>
　　</p>


</div>
// 加载loading
<div class="loading">
    <p class="progress">0%</p>
</div>

var imgs = [
            'http://pic29.photophoto.cn/20131231/0046043373506387_b.jpg',
            'http://pic36.photophoto.cn/20150713/1155116324021755_b.jpg',
            'http://pic36.photophoto.cn/20150725/1155117408459577_b.jpg',
            'http://g.hiphotos.baidu.com/zhidao/pic/item/e850352ac65c1038653edeb8b4119313b07e8903.jpg',
            'http://pic31.photophoto.cn/20140412/0005018347235619_b.jpg',
            'http://pic36.photophoto.cn/20150702/0005018795527336_b.jpg',
            'http://pic35.photophoto.cn/20150620/1155117496421877_b.jpg'
    ];
    var index = 0,
            len = imgs.length,
            count = 0,
            $progress = $('.progress');

    $.each(imgs,function(i,src){
        var imgObj = new Image();
        $(imgObj).on('load error',function(){
            alert(2)
            $progress.html(Math.round((count + 1) / len * 100) + '%');
            if (count >= len - 1) {
                $('.loading').hide();
                document.title = '1/' + len;
            }
            count ++;
        });
        imgObj.src = src
    });
    $('.btn').on('click',function(){
        if ($(this).data('control') === 'prev') {
//            第一种
//            index -- ;
//            if (index < 0) {
//                index = 0;
//            }

//            第二种
//            Math.max(0,1,2,3); 它会返回里面的最大值
            index = Math.max(0,--index); //--在前面,是先将index做减法再去和0比较,如果--在后面,就是先将index跟0比较再进行--
        }
        else {
            index = Math.min(len-1,++index);
        }
        document.title = (index+1) + '/' + len;
        $('#img').attr('src',imgs[index]);
    })

实现效果如下：

这样在切换的时候就不会出现图片还没有加载出来的情况了。

由于图片预加载是常见功能，这种时候我们可以封装为一个JQ插件

代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <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 #ccc;
            background-color: #fff;
            padding: 0 10px;
            margin-right: 50px;
            color: #333;
        }
        .btn:hover{
            background-color: #eee;
        }
        .loading{
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: #eeeeee;
            text-align: center;
            font-size: 30px;
        }
        .progress {
            margin-top: 300px;
        }
    </style>
</head>
<body>
<div class="box">
    <img src="http://pic29.photophoto.cn/20131231/0046043373506387_b.jpg" id="img" width="800px">
    <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="js/jquery-2.1.4.min.js"></script>
<script src="js/preload.js"></script>
<script>
    var imgs = [
            'http://pic29.photophoto.cn/20131231/0046043373506387_b.jpg',
            'http://pic36.photophoto.cn/20150713/1155116324021755_b.jpg',
            'http://pic36.photophoto.cn/20150725/1155117408459577_b.jpg',
            'http://g.hiphotos.baidu.com/zhidao/pic/item/e850352ac65c1038653edeb8b4119313b07e8903.jpg',
            'http://pic31.photophoto.cn/20140412/0005018347235619_b.jpg',
            'http://pic36.photophoto.cn/20150702/0005018795527336_b.jpg',
            'http://pic35.photophoto.cn/20150620/1155117496421877_b.jpg'
    ];
    var index = 0,
            len = imgs.length,
            $progress = $('.progress');

　　//使用插件
    $.preload(imgs, {
       each:function(count){
           $progress.html(Math.round((count + 1) / len * 100) + '%')
       },
        all:function(){
            $('.loading').hide();
            document.title = '1/' + len;
        }
    });



    $('.btn').on('click',function(){
        if ($(this).data('control') === 'prev') {
            index = Math.max(0,--index); //--在前面,是先将index做减法再去和0比较,如果--在后面,就是先将index跟0比较再进行--
        }
        else {
            index = Math.min(len-1,++index);
        }
        document.title = (index+1) + '/' + len;
        $('#img').attr('src',imgs[index]);
    })
</script>
</body>
</html>

插件JS：

/**
 * Created by Administrator on 2018/9/16 0016.
 */
//图片预加载插件
(function($){
    function PreLoad(imgs, options){
        this.imgs = (typeof  imgs === 'string') ? [imgs] : imgs;
        this.opts = $.extend({},PreLoad.DEFAULTS,options );

        this._unoredered();
    }
    PreLoad.DEFAULTS = {
        each : null, //每一张图片加载以后执行
        all : null //所有图片加载以后执行
    }
    PreLoad.prototype._unoredered = function(){
        //无序加载
        var imgs = this.imgs,
            opts = this.opts,
            count = 0,
            len = imgs.length;
        $.each(imgs,function(i,src){
            if (typeof src != 'string') return;

            var imgObj = new Image();
            $(imgObj).on('load error',function(){
                //$progress.html(Math.round((count + 1) / len * 100) + '%');
                opts.each && opts.each(count);

                if (count >= len - 1) {
                    opts.all && opts.all();
                }
                count ++;
            });
            imgObj.src = src
        });
    }

    //$.fn.extend -> $('#img').preload()
    //$.extend -> $.preload();

    $.extend({
        preload: function(imgs, opts){
            new PreLoad(imgs,opts);
        }
    })
})(jQuery);

图片的预加载之无序加载

猜你喜欢