用es6类封装的图片预加载技术!
1、HTML
<!DOCTYPE html>
<html lang="en"> <head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>图片预加载</title>
</head> <body>
<div style="display: none">
<img data-src="data:images/arown.png" />
<img data-src="data:images/ewm2.png" />
<img data-src="data:images/hard.png" />
<img data-src="data:images/hard2.png" />
<img data-src="data:images/hard3.png" />
<img data-src="data:images/horizontal.jpg" />
<img data-src="data:images/loading-bj.png" />
<img data-src="data:images/loading-p1.gif" />
<img data-src="data:images/loading_bj.jpg" />
<img data-src="data:images/shoushi-text.png" />
<img data-src="data:images/shoushi.png" />
<img data-src="data:images/suotou.png" />
<img data-src="data:images/suotou2.png" />
<img data-src="data:images/suozi.png" />
<img data-src="data:images/touming.png" />
<img data-src="data:images/ts11.png" />
<img data-src="data:images/ts22.png" />
<img data-src="data:images/units-icons.png" />
<img data-src="data:images/video-img.jpg" />
<img data-src="data:images/1 (1).jpg" />
<img data-src="data:images/1 (10).jpg" />
<img data-src="data:images/1 (100).jpg" />
<img data-src="data:images/1 (101).jpg" />
<img data-src="data:images/1 (102).jpg" />
<img data-src="data:images/1 (103).jpg" />
<img data-src="data:images/1 (104).jpg" />
<img data-src="data:images/1 (105).jpg" />
<img data-src="data:images/1 (106).jpg" />
<img data-src="data:images/1 (107).jpg" />
<img data-src="data:images/1 (108).jpg" />
<img data-src="data:images/1 (109).jpg" />
<img data-src="data:images/1 (11).jpg" />
<img data-src="data:images/1 (110).jpg" />
<img data-src="data:images/1 (111).jpg" />
<img data-src="data:images/1 (112).jpg" />
<img data-src="data:images/1 (113).jpg" />
<img data-src="data:images/1 (114).jpg" />
<img data-src="data:images/1 (115).jpg" />
<img data-src="data:images/1 (116).jpg" />
<img data-src="data:images/1 (117).jpg" />
<img data-src="data:images/1 (118).jpg" />
<img data-src="data:images/1 (119).jpg" />
<img data-src="data:images/1 (12).jpg" />
<img data-src="data:images/1 (120).jpg" />
<img data-src="data:images/1 (121).jpg" />
<img data-src="data:images/1 (122).jpg" />
<img data-src="data:images/1 (123).jpg" />
<img data-src="data:images/1 (124).jpg" />
<img data-src="data:images/1 (125).jpg" />
<img data-src="data:images/1 (126).jpg" />
<img data-src="data:images/1 (127).jpg" />
<img data-src="data:images/1 (128).jpg" />
<img data-src="data:images/1 (129).jpg" />
<img data-src="data:images/1 (13).jpg" />
<img data-src="data:images/1 (130).jpg" />
<img data-src="data:images/1 (131).jpg" />
<img data-src="data:images/1 (132).jpg" />
<img data-src="data:images/1 (133).jpg" />
<img data-src="data:images/1 (134).jpg" />
<img data-src="data:images/1 (135).jpg" />
<img data-src="data:images/1 (136).jpg" />
<img data-src="data:images/1 (137).jpg" />
<img data-src="data:images/1 (138).jpg" />
<img data-src="data:images/1 (139).jpg" />
<img data-src="data:images/1 (14).jpg" />
<img data-src="data:images/1 (140).jpg" />
<img data-src="data:images/1 (141).jpg" />
<img data-src="data:images/1 (142).jpg" />
<img data-src="data:images/1 (143).jpg" />
<img data-src="data:images/1 (144).jpg" />
<img data-src="data:images/1 (145).jpg" />
<img data-src="data:images/1 (146).jpg" />
<img data-src="data:images/1 (147).jpg" />
<img data-src="data:images/1 (148).jpg" />
<img data-src="data:images/1 (15).jpg" />
<img data-src="data:images/1 (16).jpg" />
<img data-src="data:images/1 (17).jpg" />
<img data-src="data:images/1 (18).jpg" />
<img data-src="data:images/1 (19).jpg" />
<img data-src="data:images/1 (2).jpg" />
<img data-src="data:images/1 (20).jpg" />
<img data-src="data:images/1 (21).jpg" />
<img data-src="data:images/1 (22).jpg" />
<img data-src="data:images/1 (23).jpg" />
<img data-src="data:images/1 (24).jpg" />
<img data-src="data:images/1 (25).jpg" />
<img data-src="data:images/1 (26).jpg" />
<img data-src="data:images/1 (27).jpg" />
<img data-src="data:images/1 (28).jpg" />
<img data-src="data:images/1 (29).jpg" />
<img data-src="data:images/1 (3).jpg" />
<img data-src="data:images/1 (30).jpg" />
<img data-src="data:images/1 (31).jpg" />
<img data-src="data:images/1 (32).jpg" />
<img data-src="data:images/1 (33).jpg" />
<img data-src="data:images/1 (34).jpg" />
<img data-src="data:images/1 (35).jpg" />
<img data-src="data:images/1 (36).jpg" />
<img data-src="data:images/1 (37).jpg" />
<img data-src="data:images/1 (38).jpg" />
<img data-src="data:images/1 (39).jpg" />
<img data-src="data:images/1 (4).jpg" />
<img data-src="data:images/1 (40).jpg" />
<img data-src="data:images/1 (41).jpg" />
<img data-src="data:images/1 (42).jpg" />
<img data-src="data:images/1 (43).jpg" />
<img data-src="data:images/1 (44).jpg" />
<img data-src="data:images/1 (45).jpg" />
<img data-src="data:images/1 (46).jpg" />
<img data-src="data:images/1 (47).jpg" />
<img data-src="data:images/1 (48).jpg" />
<img data-src="data:images/1 (49).jpg" />
<img data-src="data:images/1 (5).jpg" />
<img data-src="data:images/1 (50).jpg" />
<img data-src="data:images/1 (51).jpg" />
<img data-src="data:images/1 (52).jpg" />
<img data-src="data:images/1 (53).jpg" />
<img data-src="data:images/1 (54).jpg" />
<img data-src="data:images/1 (55).jpg" />
<img data-src="data:images/1 (56).jpg" />
<img data-src="data:images/1 (57).jpg" />
<img data-src="data:images/1 (58).jpg" />
<img data-src="data:images/1 (59).jpg" />
<img data-src="data:images/1 (6).jpg" />
<img data-src="data:images/1 (60).jpg" />
<img data-src="data:images/1 (61).jpg" />
<img data-src="data:images/1 (62).jpg" />
<img data-src="data:images/1 (63).jpg" />
<img data-src="data:images/1 (64).jpg" />
<img data-src="data:images/1 (65).jpg" />
<img data-src="data:images/1 (66).jpg" />
<img data-src="data:images/1 (67).jpg" />
<img data-src="data:images/1 (68).jpg" />
<img data-src="data:images/1 (69).jpg" />
<img data-src="data:images/1 (7).jpg" />
<img data-src="data:images/1 (70).jpg" />
<img data-src="data:images/1 (71).jpg" />
<img data-src="data:images/1 (72).jpg" />
<img data-src="data:images/1 (73).jpg" />
<img data-src="data:images/1 (74).jpg" />
<img data-src="data:images/1 (75).jpg" />
<img data-src="data:images/1 (76).jpg" />
<img data-src="data:images/1 (77).jpg" />
<img data-src="data:images/1 (78).jpg" />
<img data-src="data:images/1 (79).jpg" />
<img data-src="data:images/1 (8).jpg" />
<img data-src="data:images/1 (80).jpg" />
<img data-src="data:images/1 (81).jpg" />
<img data-src="data:images/1 (82).jpg" />
<img data-src="data:images/1 (83).jpg" />
<img data-src="data:images/1 (84).jpg" />
<img data-src="data:images/1 (85).jpg" />
<img data-src="data:images/1 (86).jpg" />
<img data-src="data:images/1 (87).jpg" />
<img data-src="data:images/1 (88).jpg" />
<img data-src="data:images/1 (89).jpg" />
<img data-src="data:images/1 (9).jpg" />
<img data-src="data:images/1 (90).jpg" />
<img data-src="data:images/1 (91).jpg" />
<img data-src="data:images/1 (92).jpg" />
<img data-src="data:images/1 (93).jpg" />
<img data-src="data:images/1 (94).jpg" />
<img data-src="data:images/1 (95).jpg" />
<img data-src="data:images/1 (96).jpg" />
<img data-src="data:images/1 (97).jpg" />
<img data-src="data:images/1 (98).jpg" />
<img data-src="data:images/1 (99).jpg" /> </div> <div class="loadingpics">
<img id="loadingpics" src="data:images/loading-p1.gif" />
</div> <div class="loadingpics2">
<p class="perc_txt" style="color: #000">0%</p>
</div>
</body>
<script src="js/jquery-2.2.3.min.js"></script>
<script src="js/newpreLoad.js"></script>
<script>
var imgList = [];
$('img[data-src]').each(function () {
var src = $(this).data("src");
imgList.push(src);
})
var loadImg = new PreloadImg(imgList);
loadImg.loadImg();
</script> </html>
2、js
/**
* 自定义预加载图片的类
* param imgList传入的待加载图片数组
* param imgLoadAll待加载总数量
* param count已加载数量
*/
//判断是否微信登陆
var ua = window.navigator.userAgent.toLowerCase();
function isWeiXin() {
if (ua.match(/MicroMessenger/i) == 'micromessenger') {
return true;
} else {
return false;
}
} class PreloadImg {
constructor(imgList) {
this.imgList = imgList;
this.imgLoadAll = this.imgList.length;
this.count = 0;
this.per = 0;
}
// 遍历待加载的图片
loadImg() {
var that = this;
that.imgList.forEach(function (src, i) {
var newsrc = src.substring(src.length - 3);
if (newsrc === 'mp3') {
var audio = new Audio(src);
var loadType = false;
if (isWeiXin()) {
document.addEventListener("WeixinJSBridgeReady", function () {
audio.load();
audio.addEventListener('canplaythrough', function () {
if (!loadType) {
loadType = true;
that.callback();
}
}, false);
}, false);
} else {
audio.load();
audio.addEventListener('canplaythrough', function () {
if (!loadType) {
loadType = true;
console.log('歌曲下载完毕');
that.callback();
}
}, false);
}
} else {
var img = new Image();
img.onload = function () {
that.callback();
}
img.src = src;
}
});
}
// 加载完毕回调
callback() {
var that = this;
that.count = that.count + 1;
console.log(that.count)
that.per = Math.floor((that.count / that.imgLoadAll) * 100);
that.changePer(that.per);
if (that.per == 100) {
console.log('加载完毕');
}
}
// 更改DOM百分比样式
changePer(per) {
$(".perc_txt").html(per + "%");
}
}
用es6类封装的图片预加载技术!的更多相关文章
- 再谈javascript图片预加载技术
图片预加载技术的典型应用: 如lightbox方式展现照片,无疑需要提前获得大图的尺寸,这样才能居中定位,由于javascript无法获取img文件头数据,必须等待其加载完毕后才能获取真实的大小然后展 ...
- 转载：用Jquery实现的图片预加载技术，可以实现有序加载和无序加载！
一.背景 我们在做页面的时候,从用户体验的角度出发,肯定是希望用户以最快的速度看到完整的页面信息,但在实际情况中经常会遇到些问题. 比如受网速影响,页面加载素材的时间比较长,页面会出现短时间的错乱或者 ...
- JQ封装图片预加载插件
我们知道,图片的加载,特别是资源较大的图片,加载相当耗费时间.为了提高用户体验,不得不使用图片预加载技术来提前加载,以提高用户在浏览时的流畅度. 先来弄明白图片的懒加载和预加载的不同: 1)概念:懒加 ...
- Javascript图片预加载详解
预加载图片是提高用户体验的一个很好方法.图片预先加载到浏览器中,访问者便可顺利地在你的网站上冲浪,并享受到极快的加载速度.这对图片画廊及图片占据很大比例的网站来说十分有利,它保证了图片快速.无缝地发布 ...
- 利用CSS、JavaScript及Ajax实现图片预加载的三大方法
预加载图片是提高用户体验的一个很好方法.图片预先加载到浏览器中,访问者便可顺利地在你的网站上冲浪,并享受到极快的加载速度.这对图片画廊及图片占据很大比例的网站来说十分有利,它保证了图片快速.无缝地发布 ...
- 利用CSS、JavaScript及Ajax实现图片预加载的三大方法(转)
预加载图片是提高用户体验的一个很好方法.图片预先加载到浏览器中,访问者便可顺利地在你的网站上冲浪,并享受到极快的加载速度.这对图片画廊及图片占据很大比例的网站来说十分有利,它保证了图片快速.无缝地发布 ...
- Javascript图片预加载详解 分类： JavaScript HTML+CSS 2015-05-29 11:01 768人阅读 评论(0) 收藏
预加载图片是提高用户体验的一个很好方法.图片预先加载到浏览器中,访问者便可顺利地在你的网站上冲浪,并享受到极快的加载速度.这对图片画廊及图片占据很大比例的网站来说十分有利,它保证了图片快速.无缝地发布 ...
- 利用CSS、JavaScript及Ajax实现图片预加载的三大方法及优缺点分析
预加载图片是提高用户体验的一个很好方法.图片预先加载到浏览器中,访问者便可顺利地在你的网站上冲浪,并享受到极快的加载速度.这对图片画廊及图片占据很大比例的网站来说十分有利,它保证了图片快速.无缝地发布 ...
- Javascript实现图片预加载【回调函数，多张图片】
使用JS实现一组图片动画效果或者使用HTML5 Canvas渲染一系列图片等案例中,需要图片全部加载完成方可运行动画效果.此时程序中就会涉及多张图片预加载代码.当接二连三的案例中都涉及图片预加载时,就 ...
随机推荐
- 一统江湖的大前端（6）commander.js + inquirer.js——懒，才是第一生产力
<一统江湖的大前端>系列是自己的前端学习笔记,旨在介绍javascript在非网页开发领域的应用案例和发现各类好玩的js库,不定期更新.如果你对前端的理解还是写写页面绑绑事件,那你真的是有 ...
- 聊聊 API Gateway 和 Netflix Zuul
最近参与了公司 API Gateway 的搭建工作,技术选型是 Netflix Zuul,主要聊一聊其中的一些心得和体会. 本文主要是介绍使用 Zuul 且在不强制使用其他 Neflix OSS 组件 ...
- 坑：微信小程序wx.request和wx.uploadFile中传参数的区别
微信小程序中通过组件<form>提交表单的时候,在js中通过e.detail.value得到所提交表单的json格式数据.一般提交表单我们都是通过wx.request请求,提交表单数据,通 ...
- vue 新版本 webpack 代理 跨域设置
旧版本中:dev-server.js 这段去掉 var apiRoutes = express.Router() //getList apiRoutes.get('/getDiscList', fun ...
- 键盘上的"整蛊专家"，如何防止短信轰炸机
"短信轰炸机",是别人通过爬虫或者其他抓取手段在网路上收集那些公司平台短信业务接口的一个集成程序,可能只需要输入一个手机号,对方一整天都会收到各大平台的注册或提醒短信,就是手机在那 ...
- WPF开发为按钮提供添加，删除和重新排列ListBox内容的功能
介绍 我有一种情况,我希望能够将项目添加到列表中,并在列表中移动项目,这似乎是使用a的最简单方法ListBox.我立刻想到了如何以通用的方式做到这一点,然后,也许,可以使用行为来做到这一点.这似乎是一 ...
- java基础知识总结二
1. synchronized和reentrantlock异同 相同点 都实现了多线程同步和内存可见性语义 都是可重入锁 不同点 实现机制不同 synchronized通过java对象头锁标记和Mon ...
- 牛客网：Java重命名文件
项目介绍 不管是C/C++还是JAVA,都可能生成一些持久性数据,我们可以将数据存储在文件或数据库中,此项目主要训练学习Java对本地磁盘的文件重命名,例如C:\nowcoder.txt重命名C:\n ...
- 为什么不使用github的wiki而是使用mkdocs做文档管理？
为什么不使用github的wiki而是使用mkdocs做文档管理? 目前 KSFramework 是使用mkdocs来做在线文档 而非使用github的wiki,这是为什么呢? 在windows下搭建 ...
- 用SQL语句实现：当A列大于B列时选择A列否则选择B列，当B列大于C列时选择B列否则选择C列。
数据库中有A B C三列,用SQL语句实现:当A列大于B列时选择A列否则选择B列,当B列大于C列时选择B列否则选择C列. 方法一: select (case when a>b then a el ...