<!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. <亲测>centos7通过yum安装JDK1.8(实际上是openjdk)

    centos7通过yum安装JDK1.8   安装之前先检查一下系统有没有自带open-jdk 命令: rpm -qa |grep java rpm -qa |grep jdk rpm -qa |gr ...

  2. Mysql临时文件目录控制

    查看mysql的log-error日志发现如下错误: ERROR 3 (HY000): Error writing file '/tmp/MYbEd05t' (Errcode: 28) 这是由于mys ...

  3. ylbtech-协议-网络-安全协议：HTTPS

    ylbtech-协议-网络-安全协议:HTTPS HTTPS(全称:Hyper Text Transfer Protocol over Secure Socket Layer 或 Hypertext ...

  4. Getting started - RN1

    0. down yarn https://yarnpkg.com 1. Expo Cli 此环境用于开发或学习之用. (1)install npm install -g expo-cli (2) us ...

  5. Sklearn (一) 监督学习

    本系列博文是根据SKlearn的一个学习小结,并非原创!  1.直接学习TensorFlow有点不知所措,感觉需要一些基础知识做铺垫.  2.之前机器学习都是理论<Ng机器学习基础>+底层 ...

  6. 《算法导论》——顺序统计RandomizedSelect

    RandomizedSelect.h: #include <stdlib.h> namespace dksl { /* *交换 */ void Swap(int* numArray,int ...

  7. Spring4新特性

    参考 : https://jinnianshilongnian.iteye.com/blog/1990081

  8. CSS样式学习-3、轮廓、伪类/元素、display-flex布局

    一.轮廓 outline绘制于元素周围的一条线,位于边框边缘外围. 属性规定元素轮廓的样式.颜色.宽度. outline-width轮廓宽度,属性:thin细轮廓.medium中等(默认值).thic ...

  9. js：作用域总结1

    先说几个概念: 1.js代码从上往下执行 2.变量提升: 变量提升是浏览器的一个功能,在运行js代码之前,浏览器会给js一个全局作用域叫window,window分两个模块,一个叫内存模块,一个叫运行 ...

  10. LeetCode OJ 129. Sum Root to Leaf Numbers

    题目 Given a binary tree containing digits from 0-9 only, each root-to-leaf path could represent a num ...