//图片预加载

//闭包模拟局部作用于

(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. Python进阶7--正则表达式

    正则表达式*** 概述 分类 基本语法  元字符 ^ 匹配字符串的开头 $ 匹配字符串的末尾. . 匹配任意字符,除了换行符,当re.DOTALL标记被指定时,则可以匹配包括换行符的任意字符. [.. ...

  2. 鼠标拖动DOM

    自己收藏,使用angualrjs的directive些的鼠标拖动DOM.... <!DOCTYPE html> <html lang="en"> <h ...

  3. git版本回退

    场景1: 当你改乱了工作区某个文件的内容,修改后未执行git add和git commit,想直接丢弃工作区的修改时,用命令git checkout -- file. 场景2: 当你不但改乱了工作区某 ...

  4. BUGKU Misc 普通的二维码

    下载的文件是一个bmp文件,在我的印象中bmp好像没有什么隐写技巧,有些慌张. 既然是二维码,那不妨先扫一下试一试 哈哈!就不告诉你flag在这里! 嗯,意料之中 1首先我把它放到了stegosolv ...

  5. 源码分析 ucosii/source 任务源码详细分析

    分析源码: 得先学会读文档, 函数前边的 note :是了解该程序员的思想的途径.不得不重视 代码前边的  Notes,了解思想后,然后在分析代码时看他是如何具体实现的. 1. ucosii/sour ...

  6. [CF 1043F] Make It One

    Description 给定 \(n\) 个正整数 \(a_i\),最少选出多少个 \(a_i\) 使得他们 \(gcd\) 为 \(1\)?\(n,a_i\le 3\times 10^5\). So ...

  7. 聊聊 Scala 的伴生对象及其意义

    2019-04-22 关键字:Scala 伴生对象的作用 关于 Scala 伴生对象,比教材更详细的解释. 什么是伴生对象? 教材中关于伴生对象的解释是:实现类似 Java 中那种既有实例成员又有静态 ...

  8. leanote使用本地账户时，去掉待同步的小红点

    切换开发者工具,如下图,点击左上角的箭头图标,选取元素,直接选择小红点. 然后会看到小红点来自于resources/app/public/themes/default.css文件中2092行: .it ...

  9. Cnblogs美化总结

    测试 扩展阅读 [转载]详谈如何定制自己的博客园皮肤 - 云+社区 - 腾讯云谢谢!! [PS]3步搞定博客园界面风格 - nowgood - 博客园 [分享]博客美化(6)为你的博文自动添加目录 - ...

  10. VBScript 学习笔记

    创建一个变量 VBScript 变量名称的规则: 必须以字母开头 不能包含点号(.) 不能超过 255 个字符 在 VBScript 的缩写中,所有的变量都与类型 variant 相关,可存储不同类型 ...