图片预先加载 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 Card卡片列表组件
一个 Material Design 卡片.拥有一个圆角和阴影 import 'package:flutter/material.dart'; import './model/post.dart'; ...
- Ionic4.x ion-infinite-scroll 上拉分页加载更多
<ion-header> <ion-toolbar> <ion-title> Tab One </ion-title> </ion-toolbar ...
- Flutter修改应用图标及图标
应用名称是需要在 Android 和 iOS 中分别调整的:Android 是在 AndroidManifest.xml 中修改:iOS 则是在 Info.plist 中修改的: 如果需要更改应用的 ...
- springboot启动提示连接mysql报错:java.sql.SQLNonTransientConnectionException: CLIENT_PLUGIN_AUTH is required
如题,启动springboot报错: -- :: --- [ main] o.s.b.w.embedded.tomcat.TomcatWebServer : Tomcat initialized wi ...
- iOS电商类App研发学习总结
一.涵盖知识点: 1.电商类App架构: https://www.cnblogs.com/loying/p/4801194.html 2.快速搭建电商平台: https://www.jianshu.c ...
- ubuntu 搭建jdk1.8运行环境
参照了:https://blog.csdn.net/smile_from_2015/article/details/80056297 首先下载linux对应的安装包 下载地址:http://www.o ...
- IDEA中的,让光标回到上一次停留的地方
IDEA中的,光标返回到上一次停留的地方ctrl+alt+ ←IDEA中的,光标返回到下一次停留的地方ctrl+alt+ → 不过要小心,笔记本电脑,默认的翻转屏幕的快捷键和这个冲突..我的选择是关闭 ...
- webpack config to use plugin and webpack-dev-server
Demo3操作手册 本Demo演示如何配合各种plugin进行偏复杂的使用 准备环境 初始化环境, cd到demo1目录之后, 执行如下命令: npm init -y npm install webp ...
- LeetCode 168. Excel表列名称(Excel Sheet Column Title)
168. Excel表列名称 168. Excel Sheet Column Title 题目描述 给定一个正整数,返回它在 Excel 表中相对应的列名称. LeetCode168. Excel S ...
- PyTorch 常用代码段整理
基础配置 检查 PyTorch 版本 torch.__version__ # PyTorch version torch.version.cuda ...