图片预先加载 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 ...
随机推荐
- flutter Slider滑块组件
滑块,允许用户通过滑动滑块来从一系列值中选择. import 'package:flutter/material.dart'; class SliderDemo extends StatefulWid ...
- DRBD UpToDate/DUnknown 故障恢复
故障如下: root@drbd1:~# drbd-overview 0:data/0 StandAlone Primary/Unknown UpToDate/DUnknown /data/mysql ...
- 转 zabbix 优化方法 以及 后台数据库查询方法 两则
############sample 1 https://blog.51cto.com/sfzhang88/1558254 如何从Zabbix数据库中获取监控数据 sfzhang关注6人评论40627 ...
- C# log4net 配置及使用详解--日志保存到文件和Access（转）
按语: 最近项目要求选用Access数据库,但日志管理采用log4net,但保存到数据库一直没有成功,后按照如下配置在程序退出时可以成功保存. 开始新建文件应用log4net.dll ,重新编译就报 ...
- openpyxl,xlrd,win32com,wxpython,logging
目录 一. openpyxl常用操作总结 二. xlrd常用操作总结 三. win32com常用操作总结 四. 自定义异常 五. 判断中文 六. Excel数字字母转换 七. 使用wxpython进行 ...
- P/Invoke 技术
.NET 互操作 首先推荐一本书<精通.NET 互操作> ,这本书是目前中文资料里讲 互操作最详尽的书了. 做系统集成项目的同学应该都和设备打过交道(如视频设备:海康.大华等),在大多数情 ...
- Beta冲刺（1/4）
队名:秃头小队 组长博客 作业博客 组长徐俊杰 过去两天完成的任务:学习了很多东西 Github签入记录 接下来的计划:继续学习 还剩下哪些任务:后端部分 燃尽图 遇到的困难:自己太菜了 收获和疑问: ...
- R画柱形图和箱线图
数据格式如下 gene_id Sham-1 Sham-2 Sham-3 Sham-4 Sham-5 Rep-1h-1 Rep-1h-2 Rep-1h-3 Rep-1h-4 Rep-1h-5 Rep-3 ...
- poj3348（求凸包面积）
题目链接:https://vjudge.net/problem/POJ-3348 题意:转换题意后即是求凸包的面积. 思路: 套模板,求凸包面积即转换为多个三角形面积之和,用叉积求,然后除2,因为本题 ...
- Deepin 15.11 install nvidia dirver[mei you an zhuang shu ru fa]
1.firstly, exec: sudo vim /etc/modprobe.d/blacklist-nouveau.conf[create], and input [blacklist nouve ...