<!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];

// 有序预加载

var imgObj = new Image();
function loading(){
imgObj.onload = function(){
load.innerHTML = Math.round((count + 1) / imgs.length * 100) + '%';
if(count >= imgs.length){
load.style.display = 'none';
box.style.display = 'block';
img.setAttribute('src',imgs[0]);
document.title = '1/' + imgs.length;
}
else{
loading();
}
}
imgObj.onerror = function(){
load.innerHTML = Math.round((count + 1) / imgs.length * 100) + '%';
if(count >= imgs.length){
load.style.display = 'none';
box.style.display = 'block';
img.setAttribute('src',imgs[0]);
document.title = '1/' + imgs.length;
}
else{
loading();
}
}
imgObj.src = imgs[count];
count++;
}
loading();
</script>
</body>
</html>

js图片预加载、有序加载的更多相关文章

  1. JS图片预加载插件

    在开发H5项目中有时候会遇到要加载大量图片的情况,利用预加载技术可以提高用户浏览时的体验. 1)概念:懒加载也叫延迟加载:JS图片延迟加载,延迟加载图片或符合某些条件时才加载某些图片.预加载:提前加载 ...

  2. js图片预加载

    图片预加载有大体有几种方式 1.html标签或css加载图片. 显而易见我们使用img标签或者通过标签的background-image属性都可以实现图片的预加载.但是为了避免初次载入过多图片影响体验 ...

  3. js图片预加载与延迟加载

    图片预加载的机制原理:就是提前加载出图片来,给前端的服务器有一定的压力. 图片延迟加载的原理:为了缓解前端服务器的压力,延缓加载图片,符合条件的时候再加载图片,当然不符合的条件就不加载图片.​ 预加载 ...

  4. js图片预加载后触发操作

    为了使得图片加载完,再触发回调函数,需进行图片预加载处理 function loadImage(url, callback) { var img = new Image(); img.src = ur ...

  5. js图片预加载以及延迟加载

    当我们需要做图片轮播的时候,如果让图片提前下载到本地,用浏览器缓存起来,我们可以用Image对象: function preLoadImg(){ var img=new Image(); img.sr ...

  6. vue.js 图片预览

    Vue.js的图片预览的插件还是不少,但是找了半天还是没找到跟现在项目里能用得很顺手的,其实项目里图片预览功能很简单,点击放大,能双指缩放就可以了.部分vue.js的图片预览库都需要把图片资源单独拿出 ...

  7. js图片预览插件，不涉及上传

    小小的几十行代码,很牛逼,很实用. 支持多个图片的预览,只要new多个对象就行了. html如下 <!-- zhouxiang www.zhou-xiang.com --> <!DO ...

  8. previewImage.js图片预览缩放保存插件

    previewImage.js好用的图片预览缩放保存插件

  9. js图片预览带进度条

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

  10. js 图片预览

    图片预览 $('#pac_recipe').change(function() { var imgsrc = ''; ]) { //chrome firefox imgsrc = window.URL ...

随机推荐

  1. Java8-dateTimeFormatter

    时间格式化LocalDate,DateTimeFormatter--->parse,ofParttern 伴随lambda表达式.streams以及一系列小优化,Java 8 推出了全新的日期时 ...

  2. CSS存在形式的引用

    撰写个css文件 直接引用css文件样式的内容.本质是将css文件拿过来

  3. servlet cdi analysis

    CDI中最令人兴奋的功能是允许每个人在Java EE平台中编写强大的扩展性功能,甚至于改变其核心本身.这些扩展性功能是可以完全移植到任何支持CDI的环境中. CDI的一些主要特性 1.类型安全:CDI ...

  4. is,as,类库

    is和as运算符: 所有类型的基类 object类型 - 基类:所有类型的基类,就类似是整个生物圈的生物类,是个大的概念 object o1 = new Random(); //object可以承载R ...

  5. mysql Mac篇

    默认为mysql下载和安装完毕,安装为默认安装 下载地址:https://dev.mysql.com/downloads/file/?id=473576 1.启动mysql sudo /usr/loc ...

  6. bootstrap的日期选择器

    时间框偏移解决办法 首先导入js和css文件 <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js" ...

  7. spring 生命周期最详解

    转载. https://blog.csdn.net/qq_23473123/article/details/76610052 目的 在大三开始学习spring时,老师就说spring bean周期非常 ...

  8. LINUX 中实现逻辑卷、自动挂载

    实验项目: 准备3块10G的空闲分区,将类型ID修改为8e(LVM) 使用其中2块分区组建名为myvg的卷组,查看此卷组信息 先检查有哪些物理卷 讲两块空闲分区转换成物理卷 再检查有哪些物理卷,查看其 ...

  9. libevent安装后缺少libevent_openssl.so

    最近要使用阿里的rocketmq,需要依赖libevent,所以下了个源码自己编译安装,安装过程按照readme来的: 1 ./configure 2 make 3 make install 但是安装 ...

  10. C# 对Excel操作与分析

    今天帮现在饿公司写个工具,要动态读excel上的ip地址与端口号,来更改IE的代理地址,由于好久没写Excel的操作了,只能查阅以前的项目,总结一下: 首先我们要引用我们的com接口的excelMic ...