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学习笔记之jQuery的DOM操作
Dec 22 Javascript
js 通用javascript函数库整理
Aug 14 Javascript
iframe异步加载实现点击左边菜单加载右边内容实例讲解
Mar 04 Javascript
js实现带搜索功能的下拉框实时搜索实时匹配
Nov 05 Javascript
iframe调用父页面函数示例详解
Jul 17 Javascript
JavaScript中exec函数用法实例分析
Jun 08 Javascript
Bootstrap前端开发案例二
Jun 17 Javascript
微信小程序 数组(增,删,改,查)等操作实例详解
Jan 05 Javascript
dropload.js插件下拉刷新和上拉加载使用详解
Oct 20 Javascript
JS计算输出100元钱买100只鸡问题的解决方法
Jan 04 Javascript
JavaScript中filter的用法实例分析
Feb 27 Javascript
vue router 通过路由来实现切换头部标题功能
Apr 24 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中将数组转成XML格式的实现代码
2011/08/08 PHP
基于php-fpm的配置详解
2013/06/03 PHP
基于CakePHP实现的简单博客系统实例
2015/06/28 PHP
Laravel如何创建服务器提供者实例代码
2019/04/15 PHP
获取JavaScript用户自定义类的类名称的代码
2007/03/08 Javascript
?牟┛途W扣了一??效果出?? target=
2007/05/27 Javascript
javascript 利用Image对象实现的埋点(某处的点击数)统计
2012/12/28 Javascript
jQuery学习笔记(2)--用jquery实现各种模态提示框代码及项目构架
2013/04/08 Javascript
JQUERY实现左侧TIPS滑进滑出效果示例
2013/06/27 Javascript
JS脚本defer的作用示例介绍
2014/01/02 Javascript
JS中判断null、undefined与NaN的方法
2014/03/26 Javascript
js的flv视频播放器插件使用方法
2015/06/23 Javascript
代码分析jQuery四种静态方法使用
2015/07/23 Javascript
text-align:justify实现文本两端对齐 兼容IE
2015/08/19 Javascript
jQuery网页右侧广告跟随滚动代码分享
2020/04/20 Javascript
Angularjs实现mvvm式的选项卡示例代码
2016/09/08 Javascript
微信小程序导入Vant报错VM292:1 thirdScriptError的解决方法
2019/08/01 Javascript
js实现轮播图特效
2020/05/28 Javascript
Vue-CLI 3 scp2自动部署项目至服务器的方法
2020/07/24 Javascript
使用python分析git log日志示例
2014/02/27 Python
Python判断变量是否已经定义的方法
2014/08/18 Python
python中subprocess批量执行linux命令
2018/04/27 Python
python的pstuil模块使用方法总结
2019/07/26 Python
python multiprocessing多进程变量共享与加锁的实现
2019/10/02 Python
详解mac python+selenium+Chrome 简单案例
2019/11/08 Python
Python多线程的退出控制实现
2020/08/10 Python
利用CSS3伪元素实现逐渐发光的方格边框
2017/05/07 HTML / CSS
SmartBuyGlasses英国:购买太阳镜和眼镜
2018/01/29 全球购物
英国名牌男装店:Standout
2021/02/17 全球购物
校园门卫岗位职责
2013/12/09 职场文书
诚信考试标语
2014/06/24 职场文书
2014市国税局对照检查材料思想汇报
2014/09/23 职场文书
银行求职信范文怎么写
2015/03/20 职场文书
送达通知书
2015/04/25 职场文书
导游词之西安骊山
2019/12/20 职场文书
python 用递归实现通用爬虫解析器
2021/04/16 Python