图片预先加载 preloadjs
<body>
<div>
<div></div>
</div>
<img src="http://www.mamicode.com/images/bg0.png"/> <img src="http://www.mamicode.com/images/btn.png"/> <img src="http://www.mamicode.com/images/fish1.png"/> <img src="http://www.mamicode.com/images/fish2.png"/> <img src="http://www.mamicode.com/images/img1.png"/> <img src="http://www.mamicode.com/images/img2.png"/> <img src="http://www.mamicode.com/images/img3.png"/> <img src="http://www.mamicode.com/images/img5.png"/> <img src="http://www.mamicode.com/images/leaf1.png"/> <img src="http://www.mamicode.com/images/leaf2.png"/> <img src="http://www.mamicode.com/images/page0_main_title_gong.png"/> <img src="http://www.mamicode.com/images/page0_main_title_de.png"/> <img src="http://www.mamicode.com/images/page0_main_title_wu.png"/> <img src="http://www.mamicode.com/images/page0_main_title_liang.png"/> <img src="http://www.mamicode.com/images/page0_water1.png"/> <img src="http://www.mamicode.com/images/page0_water2.png"/> <img src="http://www.mamicode.com/images/page0_water3.png"/> <img src="http://www.mamicode.com/images/page0_yun_left1.png"/> <img src="http://www.mamicode.com/images/page0_yun_right1.png"/> <img src="http://www.mamicode.com/images/page0_yun_right2.png"/> <img src="http://www.mamicode.com/images/page0_yun_right3.png"/>
<img src="http://www.mamicode.com/images/img2.png" alt=" "><img src="http://www.mamicode.com/images/img2_main.png" alt=" ">
<div>
</div>
</body>
<script type="text/javascript" src="http://www.mamicode.com/js/jquery.min.js"></script>
<script type="text/javascript" src="http://www.mamicode.com/js/preloadjs-0.6.1.min.js"></script>
/******************************preloading start********************************/ var preload; var mainfest; // 初始化预加载manifest清单 function setupManifest(){ mainfest = [ { src:"http://www.mamicode.com/images/bg0.png"} , { src:"http://www.mamicode.com/images/btn.png"}, { src:"http://www.mamicode.com/images/fish1.png"} , { src:"http://www.mamicode.com/images/fish2.png"}, { src:"http://www.mamicode.com/images/img1.png"} , { src:"http://www.mamicode.com/images/img2.png"}, { src:"http://www.mamicode.com/images/img3.png"} , { src:"http://www.mamicode.com/images/img5.png"}, { src:"http://www.mamicode.com/images/leaf1.png"} , { src:"http://www.mamicode.com/images/leaf2.png"}, { src:"http://www.mamicode.com/images/page0_main_title_de.png"} , { src:"http://www.mamicode.com/images/page0_main_title_gong.png"}, { src:"http://www.mamicode.com/images/page0_main_title_liang.png"} , { src:"http://www.mamicode.com/images/page0_main_title_wu.png"}, { src:"http://www.mamicode.com/images/page0_water1.png"} , { src:"http://www.mamicode.com/images/page0_water2.png"}, { src:"http://www.mamicode.com/images/page0_water3.png"} , { src:"http://www.mamicode.com/images/page0_yun_left1.png"}, { src:"http://www.mamicode.com/images/page0_yun_right1.png"} , { src:"http://www.mamicode.com/images/page0_yun_right2.png"}, { src:"http://www.mamicode.com/images/page0_yun_right3.png"} , { src:"images/page2_bg.png"}, { src:"images/water2.png"},{ src:"http://www.mamicode.com/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
标签：
原文地址：https://www.cnblogs.com/shirleyjiang/p/11793785.html
温馨提示: 本文由杰米博客推荐，转载请保留链接: https://www.jmwww.net/file/web/10051.html
- 上一篇：Servlet学习（二）
- 下一篇：1.1项目启动成功访问网页404
