图片预加载技术

图片预加载的特点

　　1、提前加载所需图片

　　2、更好的用户体验

图片预加载分为两类

　　1、无序加载

　　　　(1)图片相册

　　　　(2)qq表情

　　2、有序加载

　　　　(3)漫画加载

实例1图片相册之使用预加载（不用插件）

<!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>
    <script
  src="http://code.jquery.com/jquery-1.12.4.min.js"
  integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ="
  crossorigin="anonymous"></script>
    <style media="screen">
        html,body{
            height: 100%;
        }
        .box{
            text-align: center;
        }
        .btn{
            display: inline-block;
            height: 30px;
            line-height: 30px;
            border: 1px solid #ccc;
            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: #eee;
            text-align: center;
            font-size: 30px;
        }
        .progress{
            margin-top: 300px;
        }
    </style>
</head>
<body>
<div class="box">
    <img src="//yx-public.oss-cn-hangzhou.aliyuncs.com/adc98e6055dea2f7d70dbf29330836ee.jpeg" alt="" 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 type="text/javascript">
    var imgs=[
        '//yx-public.oss-cn-hangzhou.aliyuncs.com/adc98e6055dea2f7d70dbf29330836ee.jpeg',
        '//yx-public.oss-cn-hangzhou.aliyuncs.com/14d609f923961c318f13c7fd7e8ac3f6.jpeg',
        'http://yx-public.oss-cn-hangzhou.aliyuncs.com/00d979a61282883a468e7a54bb724063.jpeg',
        'http://yx-public.oss-cn-hangzhou.aliyuncs.com/c2a69a01f45fc6d2bfb1aa68ea578eba.jpeg',
        'http://yx-public.oss-cn-hangzhou.aliyuncs.com/574ce331b164e265ccaaadc975d95bf0.jpeg',
        'http://yx-public.oss-cn-hangzhou.aliyuncs.com/077054ab22e6920e4277e5cbe0b3290d.jpeg',
        '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', 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( 'prev' === $(this).data('control') ){ //上一张
            index = Math.max(0, --index);
        }else{//下一张
            index = Math.min(len-1, ++index)
        }
        document.title = (index + 1) + '/' + len;
        $('#img').attr('src', imgs[index]);
    })

</script>
</body>
</html>

View Code

实例1图片相册之使用预加载（插件）

//index.html

<!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>图片预加载之无序加载（不用插件）实例1图片相册之使用预加载</title>
    <scriptsrc="http://code.jquery.com/jquery-1.12.4.min.js"></script>
    <script src="preload.js"></script>
    <style media="screen">
        html,body{
            height: 100%;
        }
        .box{
            text-align: center;
        }
        .btn{
            display: inline-block;
            height: 30px;
            line-height: 30px;
            border: 1px solid #ccc;
            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: #eee;
            text-align: center;
            font-size: 30px;
        }
        .progress{
            margin-top: 300px;
        }
    </style>
</head>
<body>
<div class="box">
    <img src="//yx-public.oss-cn-hangzhou.aliyuncs.com/adc98e6055dea2f7d70dbf29330836ee.jpeg" alt="" 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 type="text/javascript">
    var imgs=[
        '//yx-public.oss-cn-hangzhou.aliyuncs.com/adc98e6055dea2f7d70dbf29330836ee.jpeg',
        '//yx-public.oss-cn-hangzhou.aliyuncs.com/14d609f923961c318f13c7fd7e8ac3f6.jpeg',
        'http://yx-public.oss-cn-hangzhou.aliyuncs.com/00d979a61282883a468e7a54bb724063.jpeg',
        'http://yx-public.oss-cn-hangzhou.aliyuncs.com/c2a69a01f45fc6d2bfb1aa68ea578eba.jpeg',
        'http://yx-public.oss-cn-hangzhou.aliyuncs.com/574ce331b164e265ccaaadc975d95bf0.jpeg',
        'http://yx-public.oss-cn-hangzhou.aliyuncs.com/077054ab22e6920e4277e5cbe0b3290d.jpeg',
        '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');
    $.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( 'prev' === $(this).data('control') ){ //上一张
            index = Math.max(0, --index);
        }else{//下一张
            index = Math.min(len-1, ++index)
        }
        document.title = (index + 1) + '/' + len;
        $('#img').attr('src', imgs[index]);
    })

</script>
</body>
</html>

View Code

//preload.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(){ // 无序加载
        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(){
                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)

View Code

实例2 QQ表情之JS功能

// index2.html

<!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>图片预加载之无序加载--qq表情</title>
    
    <style media="screen">
        body,p,ul,li{
            padding: 0;
            margin: 0;
        }
        body{
            background-color: #eee;
        }
        .box{
            margin: 150px 0 0 200px;
        }
        a{
            text-decoration: none;
        }
        li{
            list-style-type: none;
        }
        #face-btn{
            display: block;
            background: url(img/icon.gif) no-repeat 0 0;
            text-indent: 20px;
            color: #333;
        }
        .panel{
            display: none;
            width: 390px;
            padding: 2px;
            border: 1px solid #ccc;
            background-color: #fff;
        }
        .list li{
            display: inline-block;
            width: 24px;
            height: 24px;
            border: 1px solid #fff;
            margin-bottom: 5px;
            cursor: pointer;
        }
        .list li:hover{
            border-color: #06c;
        }
    </style>
</head>
<body>
    <div class="box">
        <a href="javascript:;" id="face-btn">表情</a>
        <div class="panel">
            <p class="loading">表情加载中，请稍后...</p>
            <ul class="list"></ul>
        </div>
    </div>
    <script src="http://code.jquery.com/jquery-1.12.4.min.js"></script>
    <script src="preload.js"></script>
    <script type="text/javascript">
        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>';

                    setTimeout(function(){
                        $panel.html(html);
                    }, 1000)
                }
            });
        });

        $(document).on('click', function(){
            $panel.hide();
        })
    </script>
</body>
</html>

View Code

// face/QQ/

qq表情包
链接：http://pan.baidu.com/s/1qY9aKWG 密码：73qa

// preload.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(){ // 无序加载
        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(){
                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)

View Code

实例3漫画浏览之有序加载(有序加载未整合到插件中)

// index3.html

<!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 media="screen">
        .box{
            text-align: center;
        }
        .btn{
            display: inline-block;
            height: 30px;
            line-height: 30px;
            border: 1px solid #ccc;
            padding: 0 10px;
            margin-right: 50px;
            color: #333;
        }
        .btn:hover{
            background-color: #eee;
        }

    </style>
</head>
<body>
    <div class="box">
        <img src="http://yx-public.oss-cn-hangzhou.aliyuncs.com/00d979a61282883a468e7a54bb724063.jpeg" alt="" 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>
    <script src="http://code.jquery.com/jquery-1.12.4.min.js"></script>
    <script type="text/javascript">
        var imgs=[
            '//yx-public.oss-cn-hangzhou.aliyuncs.com/adc98e6055dea2f7d70dbf29330836ee.jpeg',
            '//yx-public.oss-cn-hangzhou.aliyuncs.com/14d609f923961c318f13c7fd7e8ac3f6.jpeg',
            'http://yx-public.oss-cn-hangzhou.aliyuncs.com/00d979a61282883a468e7a54bb724063.jpeg',
            'http://yx-public.oss-cn-hangzhou.aliyuncs.com/c2a69a01f45fc6d2bfb1aa68ea578eba.jpeg',
            'http://yx-public.oss-cn-hangzhou.aliyuncs.com/574ce331b164e265ccaaadc975d95bf0.jpeg',
            'http://yx-public.oss-cn-hangzhou.aliyuncs.com/077054ab22e6920e4277e5cbe0b3290d.jpeg',
            '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 len = imgs.length,
                count = 0,
                index = 0;
        load();
        // 有序预加载
        function load(){
            var imgObj = new Image();
            $(imgObj).on('load error', function(){
                    if(count >= len){
                        // 所有图片已经加载完毕
                    }else{
                        load();
                    }
                    count++;

            });
            imgObj.src =  imgs[count];
        }
        $('.btn').on('click',function(){
            if( 'prev' === $(this).data('control') ){ //上一张
                index = Math.max(0, --index);
            }else{//下一张
                index = Math.min(len-1, ++index)
            }
            document.title = (index + 1) + '/' + len;
            $('#img').attr('src', imgs[index]);
        })
    </script>
</body>
</html>

View Code

实例3漫画浏览之有序加载(有序加载整合到插件中)

// index3.html

<!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 media="screen">
        .box{
            text-align: center;
        }
        .btn{
            display: inline-block;
            height: 30px;
            line-height: 30px;
            border: 1px solid #ccc;
            padding: 0 10px;
            margin-right: 50px;
            color: #333;
        }
        .btn:hover{
            background-color: #eee;
        }

    </style>
</head>
<body>
    <div class="box">
        <img src="http://yx-public.oss-cn-hangzhou.aliyuncs.com/00d979a61282883a468e7a54bb724063.jpeg" alt="" 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>
    <script src="http://code.jquery.com/jquery-1.12.4.min.js"></script>
    <script src="preload.js"></script>
    <script type="text/javascript">
        var imgs=[
            '//yx-public.oss-cn-hangzhou.aliyuncs.com/adc98e6055dea2f7d70dbf29330836ee.jpeg',
            '//yx-public.oss-cn-hangzhou.aliyuncs.com/14d609f923961c318f13c7fd7e8ac3f6.jpeg',
            'http://yx-public.oss-cn-hangzhou.aliyuncs.com/00d979a61282883a468e7a54bb724063.jpeg',
            'http://yx-public.oss-cn-hangzhou.aliyuncs.com/c2a69a01f45fc6d2bfb1aa68ea578eba.jpeg',
            'http://yx-public.oss-cn-hangzhou.aliyuncs.com/574ce331b164e265ccaaadc975d95bf0.jpeg',
            'http://yx-public.oss-cn-hangzhou.aliyuncs.com/077054ab22e6920e4277e5cbe0b3290d.jpeg',
            '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 len = imgs.length,
                index = 0;

        $.preload(imgs,{
            order: 'ordered'
        });

        $('.btn').on('click',function(){
            if( 'prev' === $(this).data('control') ){ //上一张
                index = Math.max(0, --index);
            }else{//下一张
                index = Math.min(len-1, ++index)
            }
            document.title = (index + 1) + '/' + len;
            $('#img').attr('src', imgs[index]);
        })
    </script>
</body>
</html>

View Code

// preload

// 图片预加载
(function(){
    function PreLoad(imgs, options){
        //初始化
        this.imgs = (typeof imgs === 'string') ? [imgs] : imgs;
        this.opts = $.extend({}, PreLoad.DEFAULTS, options); // 后一个覆盖前一个形成一个对象
        if(this.opts.order === 'ordered'){
            this._ordered()
        }else{
            this._unordered();
        }
    }

    PreLoad.DEFAULTS = {
        order: 'unordered', // 无序预加载
        each: null, // 每一张图片加载完毕后执行
        all: null // 所有图片加载完毕后执行
    };

    PreLoad.prototype._ordered = function(){ // 有序预加载
        var imgs = this.imgs,
                opts = this.opts,
                len = imgs.length,
                count = 0;
        load();
        // 有序预加载
        function load(){
            var imgObj = new Image();
            $(imgObj).on('load error', function(){
                    opts.each && opts.each(count);
                    if(count >= len){
                        // 所有图片已经加载完毕
                        opts.all && opts.all();
                    }else{
                        load();
                    }
                    count++;
            });
            imgObj.src =  imgs[count];
        }
    };

    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(){
                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)

View Code

posted @ 2018-03-29 14:12 renyangli 阅读(241) 评论(0) 编辑收藏举报

刷新页面返回顶部

renyangli

不去想是否能够成功，既然选择了远方，便只顾风雨兼程。

图片预加载技术

公告