<!DOCTYPE html>

<html lang="zh-CN">

<head>

    <meta charset="UTF-8">

    <title>PreLoading</title>

    <style>

        *{margin:0; padding:0; border:none; outline:0; text-decoration:none;}

        html,body,.box{width:100%; height:100%;}

        .box{display:none;}

        #img{width:90%; height:90%; margin:2vh auto 0; display:block; box-shadow:0 0 10px gray;}

        .box .btns{width:140px; height:40px; display:block; margin:20px auto;}

        .box .btns .btn{width:60px; height:40px; display:block; border:1px gray solid; background-color:#ccc; text-align:center; line-height:40px; float:left;}

        .box .btns .btn:nth-of-type(2){margin-left:16px;}

        .load{width:100%; height:100%; display:block; font-size:60px; font-family:"微软雅黑"; color:#ccc; text-align:center; line-height:100vh; position:fixed;}

    </style>

</head>

<body>

    <div class="box">

        <img id="img" src="" alt="pic">

        <p class="btns"><a href="javascript:" class="btn">prev</a><a href="javascript:" class="btn">next</a></p>

    </div>

    <p class="load">0%</p>

    <script type="text/javascript">

        var imgs = ['http://down.699pic.com/photo/50036/7661.jpg?_upt=da51378d1494571758&_upd=500367661.jpg',

                    'http://desk.fd.zol-img.com.cn/t_s1920x1080c5/g5/M00/09/0F/ChMkJljskIqIPX9bAAMPyuIn8DcAAbj8QB7XpYAAw_i343.jpg',

                    'http://desk.fd.zol-img.com.cn/t_s1920x1080c5/g5/M00/09/0F/ChMkJljskLeIaW-JAAIudN_yqvgAAbj8gDQO5AAAi6M64.jpeg',

                    'http://desk.fd.zol-img.com.cn/t_s1920x1080c5/g5/M00/0F/08/ChMkJlauzISIH0uXAARUHuJLVX8AAH8-gHu6zsABFQ2166.jpg',

                    'http://desk.fd.zol-img.com.cn/t_s1920x1080c5/g5/M00/0F/08/ChMkJlauzISIIL5TAAObxg4-XeUAAH8-gHzP3EAA5ve000.jpg'];

        // 绑定按钮事件

        var btns = document.getElementsByClassName('btn'),

            img = document.getElementById('img'),

            index = 0;

        for(var i=0;i<btns.length;i++){

            btns[i].onclick = function(){

                if(this.innerHTML === 'next'){

                    index = Math.min(++index , imgs.length-1);

                    img.setAttribute('src',imgs[index]);

                }

                if(this.innerHTML === 'prev'){

                    index = Math.max(--index , 0);

                    img.setAttribute('src',imgs[index]);

                }

            }

        }

        // 计数变量

        var count = 0,

            load = document.getElementsByClassName('load')[0],

            box = document.getElementsByClassName('box')[0];

        // 有序预加载

        var imgObj = new Image();

        function loading(){

            imgObj.onload = Pre;

            imgObj.onerror = Pre;

            function Pre(){

                load.innerHTML = Math.round((count + 1) / imgs.length * 100) + '%';

                if(count >= imgs.length){

                    load.style.display = 'none';

                    box.style.display = 'block';

                    img.setAttribute('src',imgs[0]);

                    document.title = '1/' + imgs.length;

                }

                else{

                    loading();

                }

            }

            imgObj.src = imgs[count];

            count++;

        }

        loading();

    </script>

</body>

</html>

【原生JS】图片预加载之有序预加载的更多相关文章

  1. 原生js移动端touch事件实现上拉加载更多

    大家都知道jQuery里没有touch事件,所以在移动端使用原生js实现上拉加载效果还是很不错的,闲话不多说,代码如下: //获取要操作的元素 var objSection = document.ge ...

  2. 用原生JS实现多张图片上传及预览功能（兼容IE8）

    最近需要做一个图片上传预览的功能(兼容IE8-11.chrome.firefox等浏览器),网上现有的文件上传组件(如webuploader)总是会遇到一些兼容性问题.于是我参考了一些博文(链接找不到 ...

  3. 原生js图片懒加载特效

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  4. 实用的原生js图片轮播

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  5. 分享一个自己写的基于canvas的原生js图片爆炸插件

    DEMO访问地址: https://bupt-hjm.github.io/BoomGo/博客地址: http://bupt-hjm.github.io/2016/07/10/boom/插件及使用方法地 ...

  6. jq与原生js实现收起展开效果

    jq与原生js实现收起展开效果 (jq需自己加载) <!DOCTYPE html> <html> <head> <meta charset="UTF ...

  7. 原生js轮播以及setTimeout和setInterval的理解

    下面这个代码是从一个群下载下来的,为了帮助自己理解和学习现在贴出来,与初学者共勉. <!DOCTYPE html> <html> <head> <meta c ...

  8. js 图片轮播简单版

    <html> <head> <meta charset="utf-8" /> <title></title> <s ...

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

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

随机推荐

  1. Laravel 使用 JWT 做 API 认证之tymon/jwt-auth 1.0.0-beta.1实践 - moell - SegmentFault

    安装 将"tymon/jwt-auth": "1.0.0-beta.1" 添加到 composer.json 中,执行 composer update Prov ...

  2. 洛谷 3112 [USACO14DEC]后卫马克Guard Mark——状压dp

    题目:https://www.luogu.org/problemnew/show/P3112 状压dp.发现只需要记录当前状态的牛中剩余承重最小的值. #include<iostream> ...

  3. linux 查看磁盘空间占用情况

    工作中有时被分配的测试机空间不大,经常遇到磁盘空间占满的情况.排查过程如下: 一.首先使用df -h 命令查看磁盘剩余空间,通过以下图看出/目录下的磁盘空间已经被占满. 二.进入根目录,因为最近常用的 ...

  4. Yann LeCun清华演讲：深度学习与人工智能的未来

    2017年3月22日下午,Facebook人工智能研究院院长.纽约大学终身教授Yann LeCun在清华大学大礼堂为校内师生以及慕名而来的业内人士呈现了一场主题为<深度学习与人工智能的未来(De ...

  5. php后端对跳转的封装

    php后端对跳转的封装 /** * 页面跳转 * $url 跳转地址 * $time 一段时间后跳转 */ function app_redirect($url,$time=0,$msg='') { ...

  6. objectarx MFC 非模态对话框为当前焦点

    dialog.h afx_msg LRESULT OnAcadKeepFocus(WPARAM, LPARAM); dialog.cpp BEGIN_MESSAGE_MAP(CTextDialog, ...

  7. python设计模式整理

    设计模式的定义:为了解决面向对象系统中重要和重复的设计封装在一起的一种代码实现框架,可以使得代码更加易于扩展和调用 四个基本要素:模式名称,问题,解决方案,效果 六大原则: 1.开闭原则:一个软件实体 ...

  8. text（）和html()区别

    这两天看了一下html和jquery的选择器,并对w3chool上面的在线编辑产生了兴趣,但是在用textarea展示后台纯html的时候发生错误,查阅各种资料发现不行--心态炸了.废话不多说了,上干 ...

  9. Java中的四种引用（强引用、软引用、弱引用、虚引用）

    以下内容摘自<深入理解Java虚拟机 JVM高级特性与最佳实践>第2版,强烈推荐没有看过的同学阅读,读完的感觉就是"原来学的都是些什么瘠薄东西(╯‵□′)╯︵┴─┴" ...

  10. JavaScript--微博发布效果

    效果图: 实现思路:  当发布按钮被点击时,又会分为三种情况 1.如果输入的内容为空,弹出提示:不能发布空微博 2.如果输入的文字超过120,弹出提示,微博内容不能超过120 3.正常发布微博到列表里 ...