图片预先加载 preloadjs

</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 ...

随机推荐

使用.whl文件安装torch和pytorch的方法
当使用pip install torch torchvision命令下载感觉很慢时可以先到下面的网页将.whl文件下载下来,然后再运行安装即可: torchvision也是下载好了以后,运行: p ...
libfacedetection 人臉識別
计算相似度,然后比对 QVector<cv::Point> vec_point1 = facedetect_frontal_surveillance4(face_img.clone()); ...
linux生成新的列（awk）
awk的功能特别强大,其中一个功能就是生成新的列,不论这列是在第一列,最后一列,还是中间,随你任性插入. 举例来说,有下列文件test1.txt test1.txt a b c 1 2 3 现在我想在 ...
增强篇6 CMOD增强删除
CMOD实施了一个增强,但是不需要了,怎么删除呢? 要删除PPCO0005 这个增强,进入编辑状态,发现没有删除按钮, 把PPCO0005 这项删除掉敲回车,厉害了,他又回来了,所以在这里是没法删 ...
WebSocket接收音频，并推送到声卡上
使用信息 import com.fasterxml.jackson.databind.ObjectMapper; import com.google.common.collect.ImmutableM ...
【Leetcode_easy】844. Backspace String Compare
problem 844. Backspace String Compare solution1: class Solution { public: bool backspaceCompare(stri ...
Kafka运维大全来了！优化、监控、故障处理
Kafka运维大全来了!优化.监控.故障处理…… Kafka概念 Kafka是分布式发布-订阅消息系统.它最初由LinkedIn公司开发,之后成为Apache项目的一部分.Kafka是一个分布式的 ...
beego框架(golang)学习过滤器(实现restful请求)
过滤器在用beego做restful路由的时候,遇到了除了GTE.POST之外的HTTP请求,比如 PUT.PATCH.delete请求无法通过路由认证,报错误:405 METHOD NOT ALL ...
使用第三方Java类库jaudiotagger完成Flac音频文件metadata（元数据）的读和修改
最近需要使用Java Swing做个读写Flac格式音频文件的小GUI工具,虽然Mp3tag完全可以完成Flac的读写(编辑)任务,但是为了简化工作流程(编辑Flac信息后调用其它系统的接口完成部分信 ...
手把手教你如何安装Tensorflow（Windows和Linux两种版本）
tensorflow 不支持Python2.7,最好选择下载Python3.5 现在越来越多的人工智能和机器学习以及深度学习,强化学习出现了,然后自己也对这个产生了点兴趣,特别的进行了一点点学习,就通 ...

图片预先加载 preloadjs

图片预先加载 preloadjs的更多相关文章

随机推荐

热门专题