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 相关文章推荐
asp.net+js 实现无刷新上传解析csv文件的代码
May 17 Javascript
对table和ul实现js分页示例分享
Feb 24 Javascript
JavaScript实现简单图片滚动附源码下载
Jun 17 Javascript
node.js中的querystring.unescape方法使用说明
Dec 10 Javascript
JavaScript将字符串转换为整数的方法
Apr 14 Javascript
利用HTML5+Socket.io实现摇一摇控制PC端歌曲切换
Jan 13 Javascript
JQuery用$.ajax或$.getJSON跨域获取JSON数据的实现代码
Sep 23 jQuery
three.js 入门案例详解
Jan 23 Javascript
JS同步、异步、延迟加载的方法
May 05 Javascript
微信小程序移动拖拽视图-movable-view实例详解
Aug 17 Javascript
解决vue v-for src 图片路径问题 404
Nov 12 Javascript
Vue实现剪贴板复制功能
Dec 31 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
星际玩家的三大定律
2020/03/04 星际争霸
浅谈PHP定义命令空间的几个注意点(推荐)
2016/10/29 PHP
PHP验证类的封装与使用方法详解
2019/01/10 PHP
php实现文件上传基本验证
2020/03/04 PHP
SWFObject Flash js调用类
2008/07/08 Javascript
IE 下的只读 innerHTML
2009/08/21 Javascript
jQuery ajax cache缓存问题
2010/07/01 Javascript
AngularJS + Node.js + MongoDB开发的基于高德地图位置的通讯录
2015/01/02 Javascript
jQuery仿gmail实现fixed布局的方法
2015/05/27 Javascript
基于zepto.js简单实现上传图片
2016/06/21 Javascript
深入理解JavaScript中的块级作用域、私有变量与模块模式
2016/10/31 Javascript
angular-ui-sortable实现可拖拽排序列表
2016/12/28 Javascript
微信小程序request请求后台接口php的实例详解
2017/09/20 Javascript
解决微信小程序防止无法回到主页的问题
2018/09/28 Javascript
vue cli3.0结合echarts3.0与地图的使用方法示例
2019/03/26 Javascript
node事件循环和process模块实例分析
2020/02/14 Javascript
Node.js API详解之 assert模块用法实例分析
2020/05/26 Javascript
vue插件--仿微信小程序showModel实现模态提示窗功能
2020/08/19 Javascript
[58:46]OG vs NAVI 2019国际邀请赛小组赛 BO2 第二场 8.15
2019/08/17 DOTA
python中遍历文件的3个方法
2014/09/02 Python
Python的面向对象思想分析
2015/01/14 Python
python分析apache访问日志脚本分享
2015/02/26 Python
python获取当前日期和时间的方法
2015/04/30 Python
python实现用户答题功能
2018/01/17 Python
python矩阵转换为一维数组的实例
2018/06/05 Python
Selenium控制浏览器常见操作示例
2018/08/13 Python
利用python、tensorflow、opencv、pyqt5实现人脸实时签到系统
2019/09/25 Python
Python实现检测文件的MD5值来查找重复文件案例
2020/03/12 Python
Python 串口通信的实现
2020/09/29 Python
美国学校校服,儿童和婴儿服装:Cookie’s Kids
2016/10/14 全球购物
网络体系结构及协议的定义
2014/03/13 面试题
初中生自我鉴定
2014/02/04 职场文书
2014年大学教师工作总结
2014/12/02 职场文书
党员转正介绍人意见
2015/06/03 职场文书
教育教学读书笔记
2015/07/02 职场文书
小学四年级班主任工作经验交流材料
2015/11/02 职场文书