//图片预加载

//闭包模拟局部作用于

(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. .Net上传图片的一些问题

    1.IIS上传文件大小限制和上传时间限制 异常详细信息: System.Web.HttpException: 超过了最大请求长度 打开iis找到部署的网站的配置编辑器 2.设置上传时间限制 3.设置上 ...

  2. springboot 配置mybatis

  3. ZYNQ原理图中添加RTL设计模块

    前言 已有的RTL模块怎么添加到原理图中? 流程 (1)添加文件到设计中. (2)右键文件添加到block design中. (3)连线即可. 以上.

  4. Linux系统扩容根目录磁盘空间的操作方法

    问题描述 系统的服务无法正常运行,查看磁盘空间,发现根目录已经满了 解决过程 1.添加磁盘空间 2.使用fdisk -l命令查看磁盘信息 3.新建磁盘分区 4.使用fdisk /dev/sda3, 创 ...

  5. JavaScript中数据类型判断

    做判断前先来了解下 JavaScript 中的基本数据类型 一.七大数据类型 基本类型:存储在栈( stack )中 Number(包括整型和浮点型) String. Boolean. Symbol ...

  6. GWAS研究中case和control的比例是有讲究的？

    GWAS研究中,表型分两种.第一种是线性的表型,如果身高.体重.智力等:第二种是二元的表型,比如患病和未患病,即通常所说的case和control.对于表型是线性的样本来说,是不存在case和cont ...

  7. Windows系统封装教程

    Windows系统封装教程

  8. 对filter的初步认识

    Filter 技术是servlet 2.3  新增加的功能.servlet2.3是sun公司 于2000年10月发布的,它的开发者包括许多个人和公司团体,充分体现了sun公司所倡导的代码开放性原则.在 ...

  9. apue——读目录操作

    头文件: #define _POSIX_C_SOURCE 200809L #include <sys/types.h> #include <sys/stat.h> #inclu ...

  10. 序列化 反序列化 MessagePack for C＃

    阅读目录 快速序列化组件MessagePack介绍 简介 使用 快速开始 分析器 内置的支持类型 对象序列化 DataContract兼容性 序列化不可变对象(序列化构造器) 序列化回调 Union ...