美文网首页
图片预加载,封装可复用

图片预加载,封装可复用

作者: Cherry9507 | 来源:发表于2018-04-26 16:45 被阅读0次

    html

    <body>
        <div class="box">
            <img src="http://s16.sinaimg.cn/orignal/3ea244b9g79e6249ed12f&690" alt="" class="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="progress">0%</p>
        </div>
    </body>
    

    css

    *{
            margin:0;
            padding:0;
        }
        body,html{
            width: 100%;
            height: 100%;
        }
        a{
            text-decoration: none;
        }
        .btn{
            display: inline-block;
            border:1px solid #ccc;
            background: #fff;
            font-size: 14px;
            padding: 5px 10px;
            margin-right: 35px;
            color: #666;
        }
        .btn:hover{
            background: #eee;
        }
        .box{
            text-align: center;
        }
        .img{
            width: 800px;
            margin-bottom: 20px;
        }
        .loading{
            width: 100%;
            height: 100%;
            position:fixed;
            left: 0;
            top: 0;
            background: #eee;
        }
        .progress{
            font-size: 30px;
            position: absolute;
            top: 50%;
            margin-top: -30px;
            left: 50%;
        }
    

    js

    <script src="https://cdn.bootcss.com/jquery/3.3.0/jquery.min.js"></script>
    <script src="preload.js"></script>
    <script>
        $(function(){
            var imgs=[
            'http://s16.sinaimg.cn/orignal/3ea244b9g79e6249ed12f&690',  
            'http://www.deskcar.com/desktop/fengjing/201342152514/11.jpg',  
            'http://attimg.dospy.com/img/day_120403/20120403_ff7d00e3c8890ac99d0ft829Pq8AcoeE.jpg', 
            'http://attimg.dospy.com/img/day_120721/20120721_b827a9d749e4d5da6bf6686626zZVAXV.jpg', 
            'http://img.club.pchome.net/kdsarticle/2014/05/14/c11841cb92ea1ea96cd2bdc232e38515.jpg',
            'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1524649284378&di=9a5d70caecd6fdaff87c68e0ab66b37b&imgtype=0&src=http%3A%2F%2Fwww.blue1000.com%2Fupload%2F2010-07%2F100708090875221.jpg',
            'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1524649284378&di=c21297d4c0d2b75e64d41fe1b73ae284&imgtype=0&src=http%3A%2F%2Fc.hiphotos.baidu.com%2Fzhidao%2Fpic%2Fitem%2F35a85edf8db1cb1353fd8b78de54564e93584bc0.jpg',
            'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1524649284363&di=61e67e80de4efbf37aa819279e483b53&imgtype=0&src=http%3A%2F%2Fd.hiphotos.baidu.com%2Fzhidao%2Fpic%2Fitem%2F4afbfbedab64034fc321c2edaac379310b551d68.jpg',
            'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1524649284355&di=504c4ec88902ad330c96a2bfa92bdcf1&imgtype=0&src=http%3A%2F%2Fa3.topitme.com%2Fb%2F22%2F79%2F11493575500237922bo.jpg'
        ]
        var len = imgs.length,
            index = 0;
    
    //此处为插件引入书写形式
        $.preload(imgs,{
            each:function(count){
                $('.progress').html(Math.round((count +1) / len *100 )+"%");
            },//每张加载完执行的方法
            all:function(){
                $(".loading").hide();
            }//全部加载完执行的方法
        })
    
        // 无预加载功能
        $(".btn").click(function(){
    
            // 控制index的值不能无限++或--
            if(index<=0){
                index = 0
            }else if(index>=len-1){
                index = len-1;
            }
    
            // 点击按钮时的判断
            if($(this).data("control") === "prev"){//上一张
                Math.max(0,--index);
                // console.log('prev:'+index);
            }else{//下一张
                Math.min(len-1,++index);
                // console.log('next'+index);
            }
            $(".img").attr('src',imgs[index]);
        })
    
    
        })
    </script>
    

    插件内容js

    (function($){
    
             function PreLoad(imgs,options){
    
                this.imgs = (typeof imgs === "string")?[imgs]:imgs;
                this.opts = $.extend({},PreLoad.DEFAULTS,options);
                //如果没有执行事件,则默认为null,如果有事件则执行options
                this._Unordered();
            };
            //当无参传入时,设置默认值
            PreLoad.DEFAULTS = {
                each:null,//,加载完一张所执行的动作
                all:null//加载完所有图片所执行的动作
            } ;
    
            PreLoad.prototype._Unordered= function(){
    
                var imgs = this.imgs,
                    opts = this.opts,
                    len = imgs.length,
                    count = 0;
    
                $.each(imgs,function(i,val){
                    var imgObj = new Image();
                    if(typeof val != "string") return;
    
                    $(imgObj).on("load error",function(){
                        
                        opts.each && opts.each(count);
    
                        if(count >= len-1){
    
                            opts.all && opts.all();
                        }
                        count++;
                    })
    
                    imgObj.src =val; 
    
                })
    
            }
    
    
    
             $.extend({
                  preload:function(imgs,opts){
                      new PreLoad(imgs,opts);
                  }
             })
    
    
    })(jQuery);
    

    相关文章

      网友评论

          本文标题:图片预加载,封装可复用

          本文链接:https://www.haomeiwen.com/subject/pqrmlftx.html