图片预先加载 preloadjs
<body>
<div class="loading">
<div class="progress"></div>
</div>
<img src="data:images/bg0.png" style="display: none"/> <img src="data:images/btn.png" style="display: none"/> <img src="data:images/fish1.png" style="display: none"/> <img src="data:images/fish2.png" style="display: none"/> <img src="data:images/img1.png" style="display: none"/> <img src="data:images/img2.png" style="display: none"/> <img src="data:images/img3.png" style="display: none"/> <img src="data:images/img5.png" style="display: none"/> <img src="data:images/leaf1.png" style="display: none"/> <img src="data:images/leaf2.png" style="display: none"/> <img src="data:images/page0_main_title_gong.png" style="display: none"/> <img src="data:images/page0_main_title_de.png" style="display: none"/> <img src="data:images/page0_main_title_wu.png" style="display: none"/> <img src="data:images/page0_main_title_liang.png" style="display: none"/> <img src="data:images/page0_water1.png" style="display: none"/> <img src="data:images/page0_water2.png" style="display: none"/> <img src="data:images/page0_water3.png" style="display: none"/> <img src="data:images/page0_yun_left1.png" style="display: none"/> <img src="data:images/page0_yun_right1.png" style="display: none"/> <img src="data:images/page0_yun_right2.png" style="display: none"/> <img src="data:images/page0_yun_right3.png" style="display: none"/>
<img src="data:images/img2.png" alt=" " style="display: none"><img src="data:images/img2_main.png" alt=" " style="display: none">
<div class="show_box">
</div>
</body>
<script type="text/javascript" src="js/jquery.min.js"></script> <script type="text/javascript" src="js/preloadjs-0.6.1.min.js"></script>
/******************************preloading start********************************/
var preload;
var mainfest;
// 初始化预加载manifest清单
function setupManifest(){
mainfest = [
{ src:"images/bg0.png"} , { src:"images/btn.png"},
{ src:"images/fish1.png"} , { src:"images/fish2.png"},
{ src:"images/img1.png"} , { src:"images/img2.png"},
{ src:"images/img3.png"} , { src:"images/img5.png"},
{ src:"images/leaf1.png"} , { src:"images/leaf2.png"},
{ src:"images/page0_main_title_de.png"} , { src:"images/page0_main_title_gong.png"},
{ src:"images/page0_main_title_liang.png"} , { src:"images/page0_main_title_wu.png"},
{ src:"images/page0_water1.png"} , { src:"images/page0_water2.png"},
{ src:"images/page0_water3.png"} , { src:"images/page0_yun_left1.png"},
{ src:"images/page0_yun_right1.png"} , { src:"images/page0_yun_right2.png"},
{ src:"images/page0_yun_right3.png"} , { src:"images/page2_bg.png"},
{ src:"images/water2.png"},{ src:"images/img2_main.png"}
];
}
// 预加载函数
function startPreload() {
preload = new createjs.LoadQueue(true);
//注意加载音频文件需要调用如下代码行
preload.installPlugin(createjs.SOUND);
//为preloaded添加整个队列变化时展示的进度事件
preload.addEventListener("progress",handleFileProgress);
//为preloaded添加当队列完成全部加载后触发事件
preload.addEventListener("complete",loadComplete);
//设置最大并发连接数 最大值为10
preload.setMaxConnections(1);
preload.loadManifest(mainfest);
} // 当整个队列变化时展示的进度事件的处理函数
function handleFileProgress(event) {
$(".progress").text("loading..."+Math.ceil(event.loaded * 100)+ "%");
console.log(event.loaded);
}
// 处理preload添加当队列完成全部加载后触发事件
function loadComplete() {
// 设置定时器,当全部加载完毕后让100%停留0.4秒,提高用户体验,不至于让用户感觉不到
window.setTimeout(()=>{
$(".loading").remove();
},400);
$(".show_box").show();
gdx_animate();
setTimeout(function(){
location.href = 'page1.html?fresh=1';
},5000); }
setupManifest();
startPreload(); /******************************preloading end********************************/
图片预先加载 preloadjs的更多相关文章
- jQuery进行图片预先加载
/** **将图片加载到内存中,在页面任何位置引用的时候,直接从缓存中读取,提升用户的体验,提高网站的流畅度.** **/ <!DOCTYPE html PUBLIC "-//W3C/ ...
- javascript图片预先加载
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...
- Javascript图片预加载详解
预加载图片是提高用户体验的一个很好方法.图片预先加载到浏览器中,访问者便可顺利地在你的网站上冲浪,并享受到极快的加载速度.这对图片画廊及图片占据很大比例的网站来说十分有利,它保证了图片快速.无缝地发布 ...
- 利用CSS、JavaScript及Ajax实现图片预加载的三大方法
预加载图片是提高用户体验的一个很好方法.图片预先加载到浏览器中,访问者便可顺利地在你的网站上冲浪,并享受到极快的加载速度.这对图片画廊及图片占据很大比例的网站来说十分有利,它保证了图片快速.无缝地发布 ...
- 利用CSS、JavaScript及Ajax实现图片预加载的三大方法(转)
预加载图片是提高用户体验的一个很好方法.图片预先加载到浏览器中,访问者便可顺利地在你的网站上冲浪,并享受到极快的加载速度.这对图片画廊及图片占据很大比例的网站来说十分有利,它保证了图片快速.无缝地发布 ...
- Javascript图片预加载详解 分类: JavaScript HTML+CSS 2015-05-29 11:01 768人阅读 评论(0) 收藏
预加载图片是提高用户体验的一个很好方法.图片预先加载到浏览器中,访问者便可顺利地在你的网站上冲浪,并享受到极快的加载速度.这对图片画廊及图片占据很大比例的网站来说十分有利,它保证了图片快速.无缝地发布 ...
- 利用CSS、JavaScript及Ajax实现图片预加载的三大方法及优缺点分析
预加载图片是提高用户体验的一个很好方法.图片预先加载到浏览器中,访问者便可顺利地在你的网站上冲浪,并享受到极快的加载速度.这对图片画廊及图片占据很大比例的网站来说十分有利,它保证了图片快速.无缝地发布 ...
- JS实现图片预加载无需等待
网站开发时经常需要在某个页面需要实现对大量图片的浏览;用javascript来实现一个图片浏览器,让用户无需等待过长的时间就能看到其他图片 网站开发时经常需要在某个页面需要实现对大量图片的浏览,如果考 ...
- javascript设计模式实践之代理模式--图片预加载
图片的预加载就是在加载大图片前,先显示一个loading.gif,就算在网络比较慢的时候也能让人知道正在加载,总比啥反应都没有强. 下面这段代码就是预加载的一个简单的实现,假设先不处理加载图片时的on ...
随机推荐
- pytorch求范数函数——torch.norm
torch.norm(input, p='fro', dim=None, keepdim=False, out=None, dtype=None) 返回所给tensor的矩阵范数或向量范数 参数: i ...
- WebSocket始终保持连接的办法
在项目中,后台为了其实把处理结果主动推送个前端,因此使用了WebSocket. 但是问题来了,页面每跳转一次,socket都要重新关闭建立连接.这个资源消耗是很大的,而且线上环境随着并发量的增加会报错 ...
- 算法习题---5-1代码对齐(UVa1593)
一:题目 将不规范的若干行代码进行对齐.对齐按照最长字符串进行操作.见样例输入 (一)样例输入 ␣␣start:␣␣integer;␣␣␣␣//␣begins␣here stop:␣integer;␣ ...
- PAT 甲级 1070 Mooncake (25 分)(结构体排序,贪心,简单)
1070 Mooncake (25 分) Mooncake is a Chinese bakery product traditionally eaten during the Mid-Autum ...
- 利用Python来远程控制肉鸡自由操作,下一个黑客大佬就是你
利用Python来远程控制肉鸡自由操作,下一个黑客大佬就是你 直接开始主题 Server:控制端 Client:被控端 具体实现 然后当有肉鸡连接的时候我们需要获得肉鸡的socket,并且记录下来,以 ...
- robot:截图关键字
参考: https://www.cnblogs.com/hong-fithing/p/9656221.html--python https://blog.csdn.net/weixin_4315628 ...
- 个人博客搭建全记录(Hexo,Github)
搭建过程主要借鉴小歪的博客 博客主题airclod Hexo,Github建站记录 1. 准备 Github账号 注册登陆Github 创建Repository,Repository Name就是Yo ...
- 树莓派3B安装arm64操作系统
pi64 pi64基于Debian 9,地址如下https://github.com/bamarni/pi64 烧录过程还是用SDFormatter格式化,用Win32DiskImager写入即可,没 ...
- Dotmemory 内存分析工具的操作手册
教程一.开始学习dotmemory 在本教程中,我们将学习如何运行dotMemory内存快照.此外,我们将简要地看看dotMemory的用户界面和基本分析的概念.考虑dotMemory本教程作为起点 ...
- (模板)AC自动机模板
模板1. 给出模式串和文本串,文本串长度小于1e6,模式串长度之和小于1e6,求文本串中有多少模式串出现. 题目链接:https://www.luogu.org/problem/P3808 AC co ...