js-图片预加载

时间：2022-11-05 17:00:33
 
//图片预加载

//闭包模拟局部作用于

(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. Exception sending context initialized event to listener instance of class org&period;springframework&period;web&period;context&period;ContextLoaderListener org&period;springframework&period;beans&period;factory&period;BeanCreationException&colon;

    严重: Exception sending context initialized event to listener instance of class org.springframework.we ...

  2. Glusterfs分布式存储介绍（一）

    环境准备 1.centos6.8 系统的虚拟机(四台) 2.关闭iptables和SELinux 3.预装glusterfs软件包 yum install -y centos-release-glus ...

  3. IE6 Must Die

    最近 Twitter 上很多人在推一个名为 IE6 Must Die 的活动, 参与的朋友可以通过头像转换服务在自己的头像上加上一个禁止 IE6 的图标, 很是拉风. Internet Explore ...

  4. Codeforces Round &num;378 &lpar;Div&period; 2&rpar; C D

    在实验室通宵 一边做水题一边准备随时躲起来以免被门卫大爷巡查发现..结果居然没来.. 本来以为可以加几分变个颜色..结果挂了CD...状态有点差...思维不太活跃 沉迷暴力不能自拔 D 给出n个长方体 ...

  5. 自定义NSLog无时间

    #define SXLog(FORMAT, ...) fprintf(stderr,"file --\t%s\nline --\t%d\nmethd --\t%s\noutput --\t\ ...

  6. 解决python version 2&period;7 required&comma;which was not find in the registry

    程序自动写注册表 http://www.vvivv.com/post-143.html 手工写 http://blog.csdn.net/baikaishui525/article/details/9 ...

  7. python解无忧公主数学题107&period;py

    python解无忧公主数学题107.py """ python解无忧公主数学题107.py http://mp.weixin.qq.com/s?__biz=MzI5ODE ...

  8. Ionic基础——侧边栏ion-side-menus 以及ion-tap结合侧边栏详解

    一． 侧边栏菜单 : ion-side-menus 侧边栏菜单是一个最多包含三个子容器的元素: 默认情况下,侧边栏菜单将只显示ion-side-menu-content容器的内容. 向左滑动时,将显示 ...

  9. hdu 3046 Pleasant sheep and big big wolf 最小割

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=3046 In ZJNU, there is a well-known prairie. And it a ...

  10. uitableviewcell 自适应大小 参考

    - (CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath {     ...

相关文章