//图片预加载

//闭包模拟局部作用于

(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. ABP中的Filter（下）

    接着上面的一个部分来叙述,这一篇我们来重点看ABP中的AbpUowActionFilter.AbpExceptionFilter.AbpResultFilter这三个部分也是按照之前的思路来一个个介绍 ...

  2. SpringBoot配置MySql数据库和Druid连接池

    1.pom文件增加相关依赖 <dependency> <groupId>mysql</groupId> <artifactId>mysql-connec ...

  3. python学习日记（包——package）

    简述——包 包是一种通过使用‘.模块名’来组织python模块名称空间的方式. 注意: 1. 无论是import形式还是from...import形式,凡是在导入语句中(而不是在使用时)遇到带点的,都 ...

  4. 「LibreOJ β Round #4」框架 [bitset]

    题面 loj #include <cmath> #include <cstring> #include <cstdio> #include <cstdlib& ...

  5. [CIDR]calculate CIDR network capacity / 计算CIDR子网的网络容量

    题目: 答案: 过程: 以B为例,192.168.9.140/27 /27 掩码是 8 8 8 111 00000 192.168.9.140是这个网段里的一个地址 140是 10001100 所以这 ...

  6. [HNOI/AHOI2018]游戏

    题目描述 https://lydsy.com/JudgeOnline/upload/201804/%E6%B9%96%E5%8D%97%E4%BA%8C%E8%AF%95%E8%AF%95%E9%A2 ...

  7. python中__init__和__new__的区别

    参考:https://my.oschina.net/liuyuantao/blog/747164 python中__metaclass的详解 参考:https://www.cnblogs.com/ia ...

  8. mysql8.0.15二进制安装

    mysql8.0.15二进制安装 今天有幸尝试安装了社区版本的mysql8.0.15,记录下来,供以后方便使用.特此感谢知数堂的叶老师,提供了配置文件的模板. # 第一部分:系统配置 # 1.安装系统 ...

  9. fork子进程

    title: fork子进程 data: 2019/3/21 20:24:39 toc: true --- 这里实在学习socket编程前的小知识点,用来创建多个服务端 学习文档 函数可以有两个返回值 ...

  10. Neo4j安装

    一.Windows版本 1)下载java8,并配置环境变量 java下载请点击,提取码:f6ci 2)Neo4j下载 选windows版本 新建系统环境变量: 并配置Path环境变量,添加bin所在目 ...