<!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. Prometheus介绍

    Prometheus的主要特点 Prometheus 属于一站式监控告警平台,依赖少,功能齐全.Prometheus 支持对云的或容器的监控,其他系统主要对主机监控.Prometheus 数据查询语句 ...

  2. can't access lexical declaration `a' before initialization

    <script type="text/javascript"> alert(a); let a=2; </script> 以上代码报错:   Referen ...

  3. 廖雪峰Java7处理日期和时间-3java.time的API-1LocalDateTime

    1.java.time提供了新的日期和时间API: LocalDate/LocalTime/LocalDateTime ZoneDateTime/ZoneId Instant Formatter 新A ...

  4. Scrapy实战篇（五）之爬取历史天气数据

    本篇文章我们以抓取历史天气数据为例,简单说明数据抓取的两种方式: 1.一般简单或者较小量的数据需求,我们以requests(selenum)+beautiful的方式抓取数据 2.当我们需要的数据量较 ...

  5. python：推导式套路

    推导式套路 列表推导式为例的推导式详细格式,同样适用于其他推导式 variable = [out_exp_res for out_exp in input_list if out_exp == 2] ...

  6. 学习 MeteoInfo二次开发教程（二）

    1.注意TSB_Select_Click等几个名称要改为toolStripButton2_Click等. 2.以下代码的位置与public Form1()函数并行. ToolStripButton _ ...

  7. kubernetes学习笔记之十二：资源指标API及自定义指标API

    第一章.前言 以前是用heapster来收集资源指标才能看,现在heapster要废弃了从1.8以后引入了资源api指标监视 资源指标:metrics-server(核心指标) 自定义指标:prome ...

  8. python-web自动化环境安装

    web自动化环境安装 1.安装selenium 命令行使用以下命令安装selenium:pip install -U selenium 2.安装chrome浏览器 3.chromedriver的下载  ...

  9. [java,2017-05-04] 合并word文档

    import java.io.File; import com.aspose.words.Document; import com.aspose.words.ImportFormatMode; pub ...

  10. 史上最全 40 道 Dubbo 面试题及答案，看完碾压面试官

    想往高处走,怎么能不懂 Dubbo? Dubbo是国内最出名的分布式服务框架,也是 Java 程序员必备的必会的框架之一.Dubbo 更是中高级面试过程中经常会问的技术,无论你是否用过,你都必须熟悉. ...