//图片预加载

//闭包模拟局部作用于

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

        let imgs = this.imgs,

            opts = this.opts,

            count = 0,

            len = imgs.length;

            loadImg();

            //有序与加载

            function loadImg(){

                var imgObj = new Image();

                $(imgObj).on('load error',()=>{

                    opts.each && opts.each(count);

                    if(count >= len){

                        //所有图片加载完成

                        opts.all && opts.all();

                    }else{

                        //加载下一张

                        loadImg();

                    }

                    count++;

                })

                imgObj.src = imgsArr[count]

            }

    }

    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-图片预加载的更多相关文章

  1. js图片预加载

    图片预加载有大体有几种方式 1.html标签或css加载图片. 显而易见我们使用img标签或者通过标签的background-image属性都可以实现图片的预加载.但是为了避免初次载入过多图片影响体验 ...

  2. js图片预加载与延迟加载

    图片预加载的机制原理:就是提前加载出图片来,给前端的服务器有一定的压力. 图片延迟加载的原理:为了缓解前端服务器的压力,延缓加载图片,符合条件的时候再加载图片,当然不符合的条件就不加载图片.​ 预加载 ...

  3. js图片预加载后触发操作

    为了使得图片加载完,再触发回调函数,需进行图片预加载处理 function loadImage(url, callback) { var img = new Image(); img.src = ur ...

  4. js图片预加载以及延迟加载

    当我们需要做图片轮播的时候,如果让图片提前下载到本地,用浏览器缓存起来,我们可以用Image对象: function preLoadImg(){ var img=new Image(); img.sr ...

  5. JS图片预加载插件

    在开发H5项目中有时候会遇到要加载大量图片的情况,利用预加载技术可以提高用户浏览时的体验. 1)概念:懒加载也叫延迟加载:JS图片延迟加载,延迟加载图片或符合某些条件时才加载某些图片.预加载:提前加载 ...

  6. js图片预加载、有序加载

    <!DOCTYPE html><html lang="zh-CN"><head> <meta charset="UTF-8&qu ...

  7. js图片预加载实现！

    var myImage = (function(){ var imgNode = document.createElement( 'img' ); document.body.appendChild( ...

  8. JS实现图片预加载无需等待

    网站开发时经常需要在某个页面需要实现对大量图片的浏览;用javascript来实现一个图片浏览器,让用户无需等待过长的时间就能看到其他图片 网站开发时经常需要在某个页面需要实现对大量图片的浏览,如果考 ...

  9. 外贸建站之图片预加载JS代码分享

    外贸建站之图片预加载JS代码分享 function preloadimg() { setTimeout(function() { new Image().src = "images/2017 ...

  10. 图片预加载 js css预加载

    图片预加载, 效果非常明显, 特别是有多个图, 方法很简单 , 体验提升了不少 <div class="hidden">        <script type= ...

随机推荐

  1. mysql8.0 Server 在Windows平台中的安装、初始化和远程访问设置

    mysql8.0 server安装 1.下载mysql 8.0 可以到mysql官网下载 https://dev.mysql.com/downloads/mysql 或者如下地址 mysql-8.0. ...

  2. 高斯消元part2

    今天整一整高斯消元的模板,正经的 高斯消元主要用于解n元一次线性方程组与判断是否有解 主要思想? 就是高斯消元啊 主要思想是理想状态下消为每行除最后一项外只有一个1,并且每行位置互异,具体看下面. 这 ...

  3. Django 对接 支付宝支付, 回调

    平台 点击这里进入 蚂蚁金服开放平台 沙箱 点击这里进入 沙箱环境 初始界面 设置公钥 下载创建秘钥工具 1.  进入文档中心 这里 2. 选中 电脑网站支付 3. 进入后选中 API 列表 中的 统 ...

  4. MySQL物理备份 lvm-snapshot

    MySQL备份之 lvm-snapshot lvm-snapshot(工具备份) 优点: 几乎是热备(穿件快照前把表上锁,创建完成后立即释放) 支持所有引擎 备份速度快 无需使用昂贵的商业软件(它是操 ...

  5. 1068: [SCOI2007]压缩

    题解: 区间DP 考虑状态的设计: \(dp[i][j][0/1]\)表示原字符串的\(i-j\)区间有无在中间加\(M\).并且默认在\(i\)之前加入\(M\)压缩后的最小长度,显然有转移: \[ ...

  6. Nginx与前端开发

    Nginx与Node.js "Nginx是一款轻量级的HTTP服务器,采用事件驱动的异步非阻塞处理方式框架,这让其具有极好的IO性能,时常用于服务端的反向代理和负载均衡." 作为前 ...

  7. MFC：关联变量

    1. 对象(控制)变量(control) a. 数据类型:control 只能创建关联一次 b).    control 用来操控控件 c). 创建 control 变量:控件 -> 右击 -& ...

  8. C++ STL的一些操作

    priority_queue 最常用的当然是在dij的时候. #include <queue> struct node { int x, dis; bool operator < ( ...

  9. ECS集群管理docker

    1. create ECR Repositories on AWS a. local server need install git/docker/awscli b. config aws: use ...

  10. 分类器的评价指标-ROC&AUC

    ROC 曲线:接收者操作特征曲线(receiver operating characteristic curve),是反映敏感性和特异性连续变量的综合指标,roc 曲线上每个点反映着对同一信号刺激的感 ...