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 相关文章推荐
jQuery的实现原理的模拟代码 -2 数据部分
Aug 01 Javascript
Node.js中使用Buffer编码、解码二进制数据详解
Aug 16 Javascript
angularjs学习笔记之完整的项目结构
Sep 26 Javascript
js+html5实现复制文字按钮
Jul 15 Javascript
angular中的cookie读写方法
Aug 02 Javascript
Bootstrap 模态框多次显示后台提交多次BUG的解决方法
Dec 26 Javascript
Vue组件之自定义事件的功能图解
Feb 01 Javascript
JavaScript从原型到原型链深入理解
Jun 03 Javascript
jquery.pager.js分页实现详解
Jul 29 jQuery
ElementUI 修改默认样式的几种办法(小结)
Jul 29 Javascript
vue中选中多个选项并且改变选中的样式的实例代码
Sep 16 Javascript
JS检测浏览器开发者工具是否打开的方法详解
Oct 02 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
ZF框架实现发送邮件的方法
2015/12/03 PHP
Symfony2创建基于域名的路由相关示例
2016/11/14 PHP
PHP静态成员变量
2017/02/14 PHP
TP5(thinkPHP5)框架基于ajax与后台数据交互操作简单示例
2018/09/03 PHP
js操作textarea方法集合封装(兼容IE,firefox)
2011/02/22 Javascript
背景图跟随鼠标移动的Mootools插件实现代码
2011/12/12 Javascript
jQuery实现按钮只点击一次后就取消点击事件绑定的方法
2015/06/26 Javascript
jQuery实现带延迟效果的滑动菜单代码
2015/09/02 Javascript
JavaScript脚本库编写的方法
2015/12/09 Javascript
20分钟打造属于你的Bootstrap站点
2016/07/27 Javascript
浅谈jquery中使用canvas的问题
2016/10/10 Javascript
详解JS中定时器setInterval和setTImeout的this指向问题
2017/01/06 Javascript
js下拉菜单生成器dropMenu使用方法详解
2017/08/01 Javascript
从对象列表中获取一个对象的方法,依据关键字和值
2017/09/20 Javascript
微信小程序视图容器(swiper)组件创建轮播图
2020/06/19 Javascript
修改vue+webpack run build的路径方法
2018/09/01 Javascript
JS学习笔记之原型链和利用原型实现继承详解
2019/05/29 Javascript
浅谈ECMAScript 中的Array类型
2019/06/10 Javascript
[01:54]TI珍贵瞬间系列(三):翻盘
2020/08/28 DOTA
python清除字符串里非字母字符的方法
2015/07/02 Python
使用python进行拆分大文件的方法
2018/12/10 Python
Python 自动登录淘宝并保存登录信息的方法
2019/09/04 Python
python数据预处理 :数据抽样解析
2020/02/24 Python
CSS3实现多背景展示效果通过CSS3定位多张背景
2014/08/10 HTML / CSS
法国综合购物网站:RueDuCommerce
2016/09/12 全球购物
Holland & Barrett爱尔兰:英国领先的健康零售商
2019/03/31 全球购物
四年的大学生生活自我评价
2013/12/09 职场文书
财务人员求职自荐书范文
2014/02/10 职场文书
公益广告宣传方案
2014/02/28 职场文书
六查六看剖析材料
2014/10/06 职场文书
2014年小学英语教师工作总
2014/12/03 职场文书
2016年区委书记抓基层党建工作公开承诺书
2016/03/25 职场文书
python-opencv 中值滤波{cv2.medianBlur(src, ksize)}的用法
2021/06/05 Python
python 安全地删除列表元素的方法
2022/03/16 Python
MySQL数据库表约束讲解
2022/06/21 MySQL
nginx之queue的具体使用
2022/06/28 Servers