JS实现图片预加载之无序预加载功能代码
时间:2019-03-30
本文章向大家介绍JS实现图片预加载之无序预加载功能代码,主要包括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实现图片预加载之无序预加载功能代码,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!
- ansible批量管理软件部署及剧本
- 快速入门系列--MVC--02路由
- Javascript生成GUID
- 快速入门系列--MVC--04模型
- 快速入门系列--MVC--03控制器和IOC应用
- ExtJs学习笔记(3)_GridPanel[XML做数据源]
- 快速入门系列--MVC--05行为
- Linux Rsync备份服务介绍及部署守护进程模式
- 企业级Tomcat安全管理优化方案
- “妈妈”域名Mommy.com66万高价易主 现已建站
- 脸书Messenger已中招,新的加密货币挖矿病毒出现!
- Linux中MySQL配置文件my.cnf参数优化
- 干货,比较全面的c#.net公共帮助类(Common.Utility)
- Linux中如何恢复rm命令误删除的文件之extundelete编译安装及使用
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- 剑指offer(13-15)题解
- 【leetCode】青蛙跳台问题(这只青蛙会托马斯大旋转)day07
- 【leetCode】斐波那契数列day06
- 剑指offer(61-67)题解
- 宇智波程序笔记8-【高并发】ThreadLocal学会了这些,你也能和面试官扯皮了!
- 情感分析数据预处理过程
- java的内部类和静态内部类(嵌套类)
- python爬取B站视频弹幕分析并制作词云
- mybatis扩展之自定义类型处理器处理枚举类型
- IMDB影评数据集预处理(使用word2vec)
- 【leetCode】使用两个栈搞一个队列day05
- bert训练代码
- mybatis文件映射之自定义返回结果集
- maven之第一个maven程序
- 【LeetCode】重建二叉树day04