<!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. [蓝桥杯]ALGO-185.算法训练_Trash Removal

    题目描述: 代码如下: #include <algorithm> #include <cstdio> #include <cstdlib> #include < ...

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

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

  3. JavaWeb——JSTL 核心标签库使用

    JSTL 核心标签库标签共有13个,功能上分为4类: 1.表达式控制标签:out.set.remove.catch 2.流程控制标签:if.choose.when.otherwise 3.循环标签:f ...

  4. js的快速搜索

    公司这几天项目很紧张,然后一直有各种乱七八糟的事,突然说要整个搜索的功能,第一时间想到的就是用php的模糊搜索,但是性能耗的很大,并且调取出的数据的速度贼慢,在百度上找到一个通过js来搜索的功能分享给 ...

  5. linux 时间和时区设置

    在linux中与时间相关的文件有 /etc/localtime /etc/timezone 其中,/etc/localtime是用来描述本机时间,而 /etc/timezone是用来描述本机所属的时区 ...

  6. IntelliJ IDEA 性能优化

    idea打开的多了 内存占用也就多了 下边是亲试的优化ide性能的方法 1.设置JVM的启动参数: 进入idea的安装目录的bin文件夹 打开 idea.exe.vmoptions 文件, 修改-Xm ...

  7. leetcode1

    public class Solution { public int[] TwoSum(int[] nums, int target) { ]; ; i < nums.Length; i++) ...

  8. leetcode739

    class Solution(object): def dailyTemperatures(self, T: 'List[int]') -> 'List[int]': S = list() n ...

  9. pyqt5.0 GraphicsView框架

    场景(The Scene) QGraphicsScene提供图形视图场景.该场景具有以下职责: 提供用于管理大量图元的快速界面(锅) 将事件传播到每个图元(把螃蟹烧熟了) 管理图元状态,例如选择和焦点 ...

  10. python 列表 list的基本操作

    一,Python 的列表数据类型包含更多的方法. 这里是所有的列表对象方法: list.append(x) 把一个元素添加到链表的结尾,相当于 a[len(a):] = [x] . list.exte ...