图片预加载之无序预加载

<!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:" class="btn">prev</a><a href="javascript:" 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 = Pre;
imgObj.onerror = Pre; function Pre(){
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】图片预加载之无序预加载的更多相关文章

  1. 原生js移动端touch事件实现上拉加载更多

    大家都知道jQuery里没有touch事件,所以在移动端使用原生js实现上拉加载效果还是很不错的,闲话不多说,代码如下: //获取要操作的元素 var objSection = document.ge ...

  2. 用原生JS实现多张图片上传及预览功能(兼容IE8)

    最近需要做一个图片上传预览的功能(兼容IE8-11.chrome.firefox等浏览器),网上现有的文件上传组件(如webuploader)总是会遇到一些兼容性问题.于是我参考了一些博文(链接找不到 ...

  3. 原生js图片懒加载特效

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  4. 实用的原生js图片轮播

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  5. 分享一个自己写的基于canvas的原生js图片爆炸插件

    DEMO访问地址: https://bupt-hjm.github.io/BoomGo/博客地址: http://bupt-hjm.github.io/2016/07/10/boom/插件及使用方法地 ...

  6. jq与原生js实现收起展开效果

    jq与原生js实现收起展开效果 (jq需自己加载) <!DOCTYPE html> <html> <head> <meta charset="UTF ...

  7. 原生js轮播以及setTimeout和setInterval的理解

    下面这个代码是从一个群下载下来的,为了帮助自己理解和学习现在贴出来,与初学者共勉. <!DOCTYPE html> <html> <head> <meta c ...

  8. js 图片轮播简单版

    <html> <head> <meta charset="utf-8" /> <title></title> <s ...

  9. 转载:用Jquery实现的图片预加载技术,可以实现有序加载和无序加载!

    一.背景 我们在做页面的时候,从用户体验的角度出发,肯定是希望用户以最快的速度看到完整的页面信息,但在实际情况中经常会遇到些问题. 比如受网速影响,页面加载素材的时间比较长,页面会出现短时间的错乱或者 ...

随机推荐

  1. 洛谷1081 (NOIp2012) 开车旅行——倍增预处理

    题目:https://www.luogu.org/problemnew/show/P1081 预处理从每个点开始a能走多少.b能走多少.可以像dp一样从后往前推. 但有X的限制.所以该数组可以变成倍增 ...

  2. bzoj 1191 [HNOI2006]超级英雄Hero——二分图匹配

    题目:https://www.lydsy.com/JudgeOnline/problem.php?id=1191 不就是个最大匹配么. 结果WA得不行. 看TJ后发现题面上说了一旦没回答出一道题就结束 ...

  3. sprite学习

    CSS雪碧图,就是把所有的图表,按钮和图形包含在一个图像里面.它要求: 静态图片,不随用户信息变化而变化:小图片,图片容量比较小:加载量比较大. 使用这种技术可以减少Web浏览器发出的服务器请求,显著 ...

  4. 存储过程详解 -SQLServer

    来源:http://www.cnblogs.com/knowledgesea/archive/2013/01/02/2841588.html 存储过程简介 什么是存储过程:存储过程可以说是一个记录集吧 ...

  5. 001. 注释过的boot.s

    从网上搜罗一个很详细注释的boot.s版本,加了小小一点点自己的理解,不太多. 用 as86, ld86 可以编译,   ubuntu下可以通过 apt install bin86 来安装好像. ; ...

  6. maven与sbt修改国内镜像

    一.idea中的maven 1.打开IntelliJ IDEA->Settings ->Build, Execution, Deployment -> Build Tools > ...

  7. QT窗口无边框最前

    this->setWindowFlags(Qt::WindowStaysOnTopHint| Qt::CustomizeWindowHint| Qt::Tool| Qt::FramelessWi ...

  8. poj2112 最大流

    我用Dinic写的.G++ 1800ms 很慢,c++直接超时.优化后的 141ms,很快! 对于此题,建图方法很巧妙,通常想到求距离,那就会朝距离的方向建图,但是这题根据牛个数来建图,然后二分距离. ...

  9. @游记@ CSP2019

    目录 @day -??@ @day -1@ @day 0@ @day 1@ @day 2@ @day ??@ @day ??+1@ @day -??@ 和 yhn 学长在校外偶遇. 聊了一些.他说现在 ...

  10. MUI - 引导页制作

    引导页制作 本文的引导页和[官方的引导页示例](https://github.com/dcloudio/mui/blob/master/examples/hello-mui/examples/guid ...