图片预加载之无序预加载

<!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];

        // 无序预加载

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

            (function(i){

                var imgObj = new Image();

            imgObj.onload = Pre;

            imgObj.onerror = Pre;

            function Pre(){

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

                    count++;

                    if(count >= imgs.length-1){

                        load.style.display = 'none';

                        box.style.display = 'block';

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

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

                    }

                }

                imgObj.src = imgs[i];

            })(i);

        }

    </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. 转载：用Jquery实现的图片预加载技术，可以实现有序加载和无序加载！

    一.背景 我们在做页面的时候,从用户体验的角度出发,肯定是希望用户以最快的速度看到完整的页面信息,但在实际情况中经常会遇到些问题. 比如受网速影响,页面加载素材的时间比较长,页面会出现短时间的错乱或者 ...

随机推荐

  1. 利用InformationSchema与阿里云交易和账单管理API实现MaxCompute费用对账分摊统计

    利用MaxCompute InformationSchema与阿里云交易和账单管理API 实现MaxCompute费用对账分摊统计 一.需求场景分析 很多的企业用户选择MaxCompute按量付费模式 ...

  2. 【python之路9】类型定义与转换

    一.整型(int),int的作用 1.创建int类型并赋值 n = 10 或者 n = int(10)   #只要是类名加括号,都会去执行类中的 __init__()方法 n = 10,实际内部会去执 ...

  3. 如何让div处于body居中的状态

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

  4. vue路由history模式刷新页面出现404问题

    vue hash模式下,URL中存在'#',用'history'模式就能解决这个问题.但是history模式会出现刷新页面后,页面出现404.解决的办法是用nginx配置一下.在nginx的配置文件中 ...

  5. Linux安装JDK和Tomcat

    步骤如下: 1)在/root用户下建立jdk和tomcat两个文件夹并上传jdk-7u80-linux-x64.rpm和apache-tomcat-7.0.82.zip   2)安装jdk #  rp ...

  6. 掀开SQL的神秘面纱，将优化进行到底

    掀开SQL的神秘面纱,将优化进行到底 有这样一条奇怪的SQL,返回结果不足10行,逻辑读达到1.2w,存在索引却走多次全表扫描,如何揭开它神秘的面纱拯救系统性能,答案在这里,你不可错过! 本文来自上周 ...

  7. Android中View的layout mechanism（布局机制）

    layout mechanism Android中View的layout mechanism主要分为两个阶段:measure阶段和layout阶段.layout mechanism按照一定的顺序进行, ...

  8. MSSQL → 04：表的创建与维护

    一.创建表 1.1.使用SQL Server Management Studio创建表 ①.打开刚刚建立的CollegeSystemDB数据库,找到表(数据库->CollegeSystemDB- ...

  9. input输入框限制录入类型

    输入大小写字母.数字.下划线:<input type="text" onkeyup="this.value=this.value.replace(/[^\w_]/g ...

  10. Leetcode744.Find Smallest Letter Greater Than Target寻找比目标字母大的最小字母

    给定一个只包含小写字母的有序数组letters 和一个目标字母 target,寻找有序数组里面比目标字母大的最小字母. 数组里字母的顺序是循环的.举个例子,如果目标字母target = 'z' 并且有 ...