js-图片预加载

Posted 2021-02-10 面包_girl

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了js-图片预加载相关的知识，希望对你有一定的参考价值。

//图片预加载
//闭包模拟局部作用于

(function($){
    function Preload(imgs,options){
        this.imgs = (typeof imgs === ‘string‘) ? [imgs]:imgs;
        this.opts = $.extend({},Preload.DEFAULTS,options);

        //无序加载
        this._unordered(); //下划线 只在当前内部使用，不外部调用
    }
    //默认参数
    Preload.DEFAULTS = {
        each:null,//每一张图片加载完毕后执行
        all:null //所有图片加载完成后执行
    }

    Preload.prototype._unordered = function(){//无序加载
        let imgs = this.imgs,
            opts = this.opts,
            count = 0,
            len = imgs.length;

        $.each(imgs,(i,src)=>{
            if(typeof src !=‘string‘){return;}

            var imgObj = new Image();
            $(imgObj).on(‘load error‘,()=>{
                opts.each && opts.each(count);
                if(count >= len -1){
                    opts.all && opts.all();
                }
                count ++;
            })
            
            imgObj.src = src;
        })
    };

    //插件封装
    $.extend({
        preload:function(imgs,options){
            new Preload(imgs,options);
        }
    })


})(jQuery);

调用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>图片预加载</title>
    <style>
        .img-box,.btn{
            text-align: center;
        }
        .img-box img{
            width: 500px;
            height: 500px;
        }
        .btn a{
            display: inline-block;
            height: 30px;
            line-height: 30px;
            border: 1px solid red;
            border-radius: 5px;
            margin-right: 10px;
            padding: 0 10px;
            color: #333;
            text-decoration: none;
        }
        .btn a:hover{
            background: #ccc;
        }
        .loading{
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            z-index: 999;
            background: rosybrown;
            text-align: center;
            font-size: 30px;
            font-weight: 700;
        }
        .progress{
            margin-top: 300px;
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="img-box">
            <img src="http://pic1.win4000.com/wallpaper/4/59c480193e05b.jpg" alt="">
        </div>
        <div class="btn">
            <a href="javascript:;" class="prev" data-controle="prev">上一页</a>
            <a href="javascript:;" class="next" data-controle="next">下一页</a>
        </div>
    </div>

    <!-- 预加载 -->

    <div class="loading">
        <div class="progress">0%</div>
    </div>

    <script src="js/jquery-3.3.1.min.js"></script>
    <script src="js/preload.js"></script>
    <script>
        let imgsArr = [
            ‘http://pic1.win4000.com/wallpaper/4/59c480193e05b.jpg‘,
            ‘http://pic1.win4000.com/wallpaper/7/57f9f84f0a29f.jpg‘,
            ‘http://img17.3lian.com/d/file/201702/20/3a1744009d4b0e32a8a27e13299fc658.jpg‘,
            ‘http://m.wendangwang.com/pic/ac555f0efbaa75d6a2b43778/7-810-jpg_6-1080-0-0-1080.jpg‘,
            ‘http://pic170.nipic.com/file/20180620/27194830_202055800038_2.jpg‘
        ]

        //调用插件
        let index = 0,
            len = imgsArr.length,
            $progress = $(‘.progress‘);

        $.preload(imgsArr,{
            each:function(count){
                $progress.html(Math.round((count+1)/len*100) + ‘%‘);
            },
            all:function(){
                $(‘.loading‘).hide();
                 document.title = ‘1/‘ + len;
            }
        })

        $(‘.btn a‘).on(‘click‘,function(){
            if($(this).data(‘controle‘) === ‘prev‘){
                index = Math.max(0,--index)
            }else{
                index = Math.min(len - 1,++index)
            }
            document.title = (index) + ‘/‘ + len
            $(‘.img-box img‘).attr(‘src‘,imgsArr[index]);
        })
    </script>
</body>
</html>

以上是关于js-图片预加载的主要内容，如果未能解决你的问题，请参考以下文章