<!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. 饥饿的牛（dp一维最大覆盖）

    问题 H: 饥饿的牛 时间限制: 1 Sec  内存限制: 128 MB提交: 12  解决: 12[提交][状态][讨论版][命题人:外部导入][Edit] [TestData] [同步数据] 题目 ...

  2. C++中宽字符类型（wchar_t）的编码

    转载自: http://www.ituring.com.cn/article/111027 问题的起因是和一个朋友讨论不同编码的转换问题,说到了wchar_t的类型,朋友的看法是,wchar_t的编码 ...

  3. 涂抹mysql笔记-mysql字符集

    字符集:查看mysql数据库当前都支持哪些字符集:system@(none)>show character set;+----------+--------------------------- ...

  4. sql server 索引碎片相关问题

    1.查看表的索引碎片情况 --改成当前库 use DB_Name --创建变量 指定要查看的表 declare @table_id int set @table_id=object_id('Table ...

  5. Vue 双向数据绑定、事件介绍以及ref获取dom节点

    vue是一个MVVM的框架 M model V view MVVM  model改变会影响视图view,view改变会影响model 双向数据绑定必须在表单里面使用 //我发现在谷歌浏览器翻译后的网页 ...

  6. Promise事件比timeout优先

    Promise, setTimeout 和 Event Loop 下面的代码段,为什么输出结果是1,2,3,5,4而非1,2,3,4,5?(function test() { setTimeout(f ...

  7. Eclipse关于怎么调出web project

    myeclipse和eclipse两个软件不一样的点很多,当然玩的时候也会遇到找不到的选项 此片摘自: https://www.cnblogs.com/icebutterfly/p/7771936.h ...

  8. python——字符串问题总结

    转义符r/R使用: print (r'\n') print (R'\n') 输出: \n \n 不受转义符\n影响 python字符串格式化: print ("我叫 %s 今年 %d 岁!& ...

  9. 二、Jmeter脚本开发

    目录 1.Jmeter协议录制 1.Jmeter协议录制 1.1 dboy进行录制 badboy下载地址:http://www.badboy.com.au/download/add badboy是一个 ...

  10. This iPhone 6s is running iOS 11.3.1 (15E302), which may not be supported by this version of Xcode.

    This iPhone 6s is running iOS 11.3.1 (15E302), which may not be supported by this version of Xcode.