JS实现图片预加载之无序预加载功能代码


Posted in Javascript onMay 12, 2017

图片预加载之无序预加载的效果图如下所示,如果大家感觉不错,请参考实现代码。

JS实现图片预加载之无序预加载功能代码

具体代码如下所示:

<!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:" rel="external nofollow" rel="external nofollow" class="btn">prev</a><a href="javascript:" rel="external nofollow" rel="external nofollow" 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 = function(){
          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.onerror = function(){
          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实现图片预加载之无序预加载功能代码,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
在IE上直接编辑网页内容的js代码(IE地址栏js)
Apr 27 Javascript
JavaScript中的闭包原理分析
Mar 08 Javascript
jQuery实现图片与文字描述左右滑动自动切换的方法
Jul 27 Javascript
JavaScript事件类型中焦点、鼠标和滚轮事件详解
Jan 25 Javascript
基于JavaScript实现图片剪切效果
Mar 07 Javascript
AngularJS使用Filter自定义过滤器控制ng-repeat去除重复功能示例
Apr 21 Javascript
VUE-cli3使用 svg-sprite-loader
Oct 20 Javascript
node和vue实现商城用户地址模块
Dec 05 Javascript
优化Vue项目编译文件大小的方法步骤
May 27 Javascript
详解Vue.js 作用域、slot用法(单个slot、具名slot)
Oct 15 Javascript
小程序websocket心跳库(websocket-heartbeat-miniprogram)
Feb 23 Javascript
three.js欧拉角和四元数的使用方法
Jul 26 Javascript
详解React开发中使用require.ensure()按需加载ES6组件
May 12 #Javascript
vue学习笔记之指令v-text &amp;&amp; v-html &amp;&amp; v-bind详解
May 12 #Javascript
JS常用正则表达式总结【经典】
May 12 #Javascript
vue.js的安装方法
May 12 #Javascript
JS匹配日期和时间的正则表达式示例
May 12 #Javascript
js如何获取网页所有图片
May 12 #Javascript
require.js与bootstrap结合实现简单的页面登录和页面跳转功能
May 12 #Javascript
You might like
使用PHP制作新闻系统的思路
2006/10/09 PHP
基于PHP常用字符串的总结(待续)
2013/06/07 PHP
PHP 过滤页面中的BOM(实现代码)
2013/06/29 PHP
Yii框架中memcache用法实例
2014/12/03 PHP
php实现递归的三种基本方式
2020/07/04 PHP
php正则匹配文章中的远程图片地址并下载图片至本地
2015/09/29 PHP
PHP文件缓存类实现代码
2015/10/26 PHP
再谈PHP中单双引号的区别详解
2016/06/12 PHP
php的debug相关函数用法示例
2016/07/11 PHP
PHP 配置后台登录以及模板引入
2017/01/24 PHP
PHP实现双链表删除与插入节点的方法示例
2017/11/11 PHP
javascript之函数直接量(function(){})()
2007/06/29 Javascript
Firefox window.close()的使用注意事项
2009/04/11 Javascript
关于捕获用户何时点击window.onbeforeunload的取消事件
2011/03/06 Javascript
javascript自适应宽度的瀑布流实现思路
2013/02/20 Javascript
tangram框架响应式加载图片方法
2013/11/21 Javascript
一款基于jQuery的图片场景标注提示弹窗特效
2015/01/05 Javascript
简单介绍JavaScript数据类型之隐式类型转换
2015/12/28 Javascript
jQuery基础_入门必看知识点
2016/07/04 Javascript
javascript防篡改对象实例详解
2017/04/10 Javascript
vue树形结构获取键值的方法示例
2018/06/21 Javascript
Node.js assert断言原理与用法分析
2019/01/04 Javascript
Vue js with语句原理及用法解析
2020/09/03 Javascript
[01:29]Ti4循环赛第三日精彩回顾
2014/07/13 DOTA
用python实现的可以拷贝或剪切一个文件列表中的所有文件
2009/04/30 Python
详解MySQL数据类型int(M)中M的含义
2016/11/20 Python
python利用正则表达式提取字符串
2016/12/08 Python
ubuntu系统下 python链接mysql数据库的方法
2017/01/09 Python
简单了解python单例模式的几种写法
2019/07/01 Python
Python守护进程实现过程详解
2020/02/10 Python
基于html5 canvas做批改作业的小插件
2020/05/20 HTML / CSS
Petmate品牌官方网站:宠物用品
2018/11/25 全球购物
简述安装Slackware Linux系统的过程
2012/01/12 面试题
解除租赁合同协议书
2016/03/21 职场文书
Python Pytorch查询图像的特征从集合或数据库中查找图像
2022/04/09 Python
Elasticsearch 索引操作和增删改查
2022/04/19 Python