图片预加载插件

头像
白鲸鱼
    阅读 12 分钟

    gitub:

    无序加载

    <!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8"/>
    <title>图片预加载之无序加载</title>
    <style type="text/css" media="screen">
        html,body{
            height: 100%;
        }
        .box{
            text-align: center;

        }

        a{
            text-decoration: none;
        }

        .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: #eee;
        }
        .loading{
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: #eee;
            text-align: center;
            font-size: 30px;

        }
        .progress{
            margin-top: 300px;

        }
    </style>
</head>
<body>
    <div class="box">
        <img src="http://i2.hoopchina.com.cn/user/308/15960308/13383588090.jpg" alt="pic" id="img" width="1200" />
        <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.min.js"></script>
    <script type="text/javascript" src="js/preload.js"></script>
    <!-- <script type="text/javascript">
        var imgs = [
        'http://i2.hoopchina.com.cn/user/308/15960308/13383588090.jpg',
        'http://img.article.pchome.net/00/44/23/20/pic_lib/wm/2.jpg',
        'http://lcd.yesky.com/imagelist/2009/044/404q4y8g4m0p.jpg',
        'http://lcd.yesky.com/imagelist/2009/044/cgro54wt2t2x.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 () {
                $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 = Math.max(0,--index);//if (index<0){index = 0;}
            }else {
                index = Math.max(len-1,++index);
                
            }

            document.title = (index + 1) +'/' + len;

            $('#img').attr('src',imgs[index]);
        });


    </script> -->

    <script type="text/javascript">
        var imgs = [
        'http://i2.hoopchina.com.cn/user/308/15960308/13383588090.jpg',
        'http://on891bjlf.bkt.clouddn.com/1.large.jpg',
        'http://lcd.yesky.com/imagelist/2009/044/404q4y8g4m0p.jpg',
        'http://lcd.yesky.com/imagelist/2009/044/cgro54wt2t2x.jpg',
        'http://img.article.pchome.net/00/44/23/20/pic_lib/wm/2.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);//if (index<0){index = 0;}
            }else {
                index = Math.max(len-1,++index);
                
            }

            document.title = (index + 1) +'/' + len;

            $('#img').attr('src',imgs[index]);
        });


    </script>

</body>
</html>
    /*图片预加载 */

(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 () {
        /*无序加载*/
        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);/*如果opts.each存在就调用each*/

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

                count++;
            });

            imgObj.src = src;

        });    
    };

    /* $.fn.extend -> $('#img').preload
     $.extend   -> $.preload() */
    $.extend({
        preload: function (imgs,opts) {
            new PreLoad (imgs,opts);
        }

    })

})(jQuery);

    下面我们用实例来使用这个插件preload.js

    先看下效果

    图片描述

    <!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>图片预加载之无序加载--QQ表情</title>
    <style type="text/css" media="screen">
    body,p,ul,li{
        margin: 0;padding: 0;
    }
    body{
        background-color: #eee;
    }
    .box{margin:150px 0 0 200px;}
    a{
        text-decoration: none;
        outline: none;
    }

    li{
        list-style-type: none;
    }

    #face-btn{
        display: block;
        background: url(face/QQ/14.gif) no-repeat -2px -4px;
        color: #333;
        text-indent: 20px;

    }

    #face-btn:hover{
        background: url(face/QQ/12.gif) no-repeat  -2px -4px;
    }
    .panel{
        display: none;

        width: 390px;
        padding: 2px;
        border: 1px solid #ccc;
        background-color: #fff;
    }

    .loading{
        text-align: center;
    }
    .list li {
        display: inline-block;
        width: 24px;
        height: 24px;
        border: 1px solid #fff;
        margin-bottom: 5px;
        cursor: pointer;

    }
    .list li:hover{
        border-color: #05c;
    }
    </style>
    
</head>
<body>
<div class="box">
    <a href="javascript:;" id="face-btn">表情</a>
    <div class="panel">
        <p class="loading">表情加载中，请稍后...</p>
        <!-- <ul class="list">
            <li><img src="face/QQ/1.gif" alt=""></li>
            <li><img src="face/QQ/2.gif" alt=""></li>
            <li><img src="face/QQ/3.gif" alt=""></li>
            <li><img src="face/QQ/4.gif" alt=""></li>
            <li><img src="face/QQ/5.gif" alt=""></li>
            <li><img src="face/QQ/6.gif" alt=""></li>
            <li><img src="face/QQ/7.gif" alt=""></li>
            <li><img src="face/QQ/8.gif" alt=""></li>
            <li><img src="face/QQ/9.gif" alt=""></li>
            <li><img src="face/QQ/10.gif" alt=""></li>
            <li><img src="face/QQ/11.gif" alt=""></li>
            <li><img src="face/QQ/12.gif" alt=""></li>
            <li><img src="face/QQ/13.gif" alt=""></li>
            <li><img src="face/QQ/14.gif" alt=""></li>
            <li><img src="face/QQ/15.gif" alt=""></li>
            <li><img src="face/QQ/16.gif" alt=""></li>
            <li><img src="face/QQ/17.gif" alt=""></li>
            <li><img src="face/QQ/18.gif" alt=""></li>
            <li><img src="face/QQ/19.gif" alt=""></li>
            <li><img src="face/QQ/20.gif" alt=""></li>
            <li><img src="face/QQ/21.gif" alt=""></li>
            <li><img src="face/QQ/22.gif" alt=""></li>
            <li><img src="face/QQ/23.gif" alt=""></li>
            <li><img src="face/QQ/24.gif" alt=""></li>
            <li><img src="face/QQ/25.gif" alt=""></li>
            <li><img src="face/QQ/26.gif" alt=""></li>
            <li><img src="face/QQ/27.gif" alt=""></li>
            <li><img src="face/QQ/28.gif" alt=""></li>
            <li><img src="face/QQ/29.gif" alt=""></li>
            <li><img src="face/QQ/30.gif" alt=""></li>
            <li><img src="face/QQ/31.gif" alt=""></li>
            <li><img src="face/QQ/32.gif" alt=""></li>
            <li><img src="face/QQ/33.gif" alt=""></li>
            <li><img src="face/QQ/34.gif" alt=""></li>
            <li><img src="face/QQ/35.gif" alt=""></li>
            <li><img src="face/QQ/36.gif" alt=""></li>
            <li><img src="face/QQ/37.gif" alt=""></li>
            <li><img src="face/QQ/38.gif" alt=""></li>
            <li><img src="face/QQ/39.gif" alt=""></li>
            <li><img src="face/QQ/40.gif" alt=""></li>
            <li><img src="face/QQ/41.gif" alt=""></li>
            <li><img src="face/QQ/42.gif" alt=""></li>
            <li><img src="face/QQ/43.gif" alt=""></li>
            <li><img src="face/QQ/44.gif" alt=""></li>
            <li><img src="face/QQ/45.gif" alt=""></li>
            <li><img src="face/QQ/46.gif" alt=""></li>
            <li><img src="face/QQ/47.gif" alt=""></li>
            <li><img src="face/QQ/48.gif" alt=""></li>
            <li><img src="face/QQ/49.gif" alt=""></li>
            <li><img src="face/QQ/50.gif" alt=""></li>
            <li><img src="face/QQ/51.gif" alt=""></li>
            <li><img src="face/QQ/52.gif" alt=""></li>
            <li><img src="face/QQ/53.gif" alt=""></li>
            <li><img src="face/QQ/54.gif" alt=""></li>
            <li><img src="face/QQ/55.gif" alt=""></li>
            <li><img src="face/QQ/56.gif" alt=""></li>
            <li><img src="face/QQ/57.gif" alt=""></li>
            <li><img src="face/QQ/58.gif" alt=""></li>
            <li><img src="face/QQ/59.gif" alt=""></li>
            <li><img src="face/QQ/60.gif" alt=""></li>
            <li><img src="face/QQ/61.gif" alt=""></li>
            <li><img src="face/QQ/62.gif" alt=""></li>
            <li><img src="face/QQ/63.gif" alt=""></li>
            <li><img src="face/QQ/64.gif" alt=""></li>
            <li><img src="face/QQ/65.gif" alt=""></li>
            <li><img src="face/QQ/66.gif" alt=""></li>
            <li><img src="face/QQ/67.gif" alt=""></li>
            <li><img src="face/QQ/68.gif" alt=""></li>
            <li><img src="face/QQ/69.gif" alt=""></li>
            <li><img src="face/QQ/70.gif" alt=""></li>
            <li><img src="face/QQ/71.gif" alt=""></li>
            <li><img src="face/QQ/72.gif" alt=""></li>
            <li><img src="face/QQ/73.gif" alt=""></li>
            <li><img src="face/QQ/74.gif" alt=""></li>
            <li><img src="face/QQ/75.gif" alt=""></li>
        </ul> -->
    </div>

    <script type="text/javascript" src="js/jquery.min.js"></script>
    <script type="text/javascript" src="js/preload.js"></script>
    <script>
        var $btn = $('#face-btn'),
        $panel = $('.panel');

        var imgs = [];
        
        for (var i=0;i<75;i++) {
            imgs[i] = 'face/QQ/' + (i+1) + '.gif';
        }

        var len = imgs.length;

        $btn.on('click',function (e) {

            //禁止事件冒泡
            e.stopPropagation();
            $panel.show();

            $.preload(imgs,{
                all: function () {
                    var html = '';

                    html +='<ul class="list">';

                    for (var i = 0; i < len; i++) {
                        html += '<li><img src="'+ imgs[i] +'" alt=""></li>';
                    }

                    html +='</ul>';

                    // $panel.html(html);

                    setTimeout(function() {

                        $panel.html(html);

                    },1000);
                }
            })
        });

        $(document).on('click', function(event) {
            $panel.hide();
        });

    </script>


</div>
</body>
</html>

    参考：
    慕课网 图片预加载

    图片预加载
    白鲸鱼
    1k 声望110 粉丝

    方寸湛蓝

    « 上一篇
    全屏切换效果
    下一篇 »
    node.js学习记录: 理解Buffer

    引用和评论

    推荐阅读
    头像
    git使用规范

    白鲸鱼赞 1阅读 2.6k

    0 条评论
    得票最新