zoukankan      html  css  js  c++  java
  • 图片的预加载之无序加载

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

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

    在进入主体页面之前先做一个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>

    JS

    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);
  • 相关阅读:
    HTML5结构
    HTML5新增的非主体元素header元素、footer元素、hgroup元素、adress元素
    CF GYM 100703G Game of numbers
    CF GYM 100703I Endeavor for perfection
    CF GYM 100703K Word order
    CF GYM 100703L Many questions
    CF GYM 100703M It's complicate
    HDU 5313 Bipartite Graph
    CF 560e Gerald and Giant Chess
    POJ 2479 Maximum sum
  • 原文地址:https://www.cnblogs.com/qiuchuanji/p/9655134.html
Copyright © 2011-2022 走看看