preloadjs实现网页资源预加载

<!doctype html>
<html lang="zh">
<head>
    <title>PreloadJS的基础使用</title>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <style>
    </style>
    <script src="~/Scripts/jquery-1.8.2.min.js"></script>
</head>
<body>
    <canvas id="myCanvas" width="350" height="420"></canvas>
    <img id="myimg" src="" />
    <script src="../Scripts/jquery-1.8.2.min.js"></script>
    <script src="http://cdn.gbtags.com/EaselJS/0.7.1/easeljs.min.js"></script>
    <script src="http://cdn.gbtags.com/PreloadJS/0.4.1/preloadjs.min.js"></script>
    <script>

        var canvas = document.getElementById("myCanvas");
        var stage = new createjs.Stage(canvas);

        var manifest;
        var preload;
        var progressText = new createjs.Text("", "20px Arial", "#dd4814");
        progressText.x = 125 - progressText.getMeasuredWidth() / 2;
        progressText.y = 20;
        stage.addChild(progressText);
        stage.update();

        //定义相关JSON格式文件列表
        function setupManifest() {
            manifest = [{
                src: "/images/test.png",
                id: "easeljs"
            }, {
                src: "http://www.gbtags.com/gb/networks/uploadimgthumb/4d8f3f13-89c0-455c-95f3-ba5120c2f123.jpg",
                id: "logo"
            }, {
                src: "http://www.gbtags.com/tutorials/html5-tutorial/html5-demos/assets/song.ogg",
                id: "audiofile"
            }

            ];
            for (var i = 1; i <= 25; i++)
                manifest.push({ src: "/images/"+i+".png" })
        }

        //开始预加载
        function startPreload() {
            preload = new createjs.LoadQueue(true);
            //注意加载音频文件需要调用如下代码行
            preload.installPlugin(createjs.Sound);
            preload.on("fileload", handleFileLoad);
            preload.on("progress", handleFileProgress);
            preload.on("complete", loadComplete);
            preload.on("error", loadError);
            preload.loadManifest(manifest);

        }

        //处理单个文件加载
        function handleFileLoad(event) {
            console.log("文件类型: " + event.item.type);
            if (event.item.id == "logo") {
                console.log("logo图片已成功加载");
            }
        }

        //处理加载错误:大家可以修改成错误的文件地址,可在控制台看到此方法调用
        function loadError(evt) {
            console.log("加载出错!", evt.text);
        }

        //已加载完毕进度
        function handleFileProgress(event) {
            progressText.text = "已加载 " + (preload.progress * 100 | 0) + " %";
            stage.update();
        }

        //全度资源加载完毕
        function loadComplete(event) {
            console.log("已加载完毕全部资源");
        }
        setupManifest();
        startPreload();
    </script>
</body>
</html>

效果:

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

编辑于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏TungHsu

Microsoft Office的几个快捷键

顾名思义,就是把你刚刚做过的那个动作再来一遍。比如:要取消某段话中的某些超链接超链接

10720
来自专栏24K纯开源

Qt Style Sheet实践(二):组合框QComboBox的定制

导读      组合框是一个重要且应用广泛的组件,一般由两个子组件组成:文本下拉单部分和按钮部分。在许多既需要用户选择、又需要用户手动输入的应用场景下,组合框能...

75470
来自专栏Android机动车

完美兼容4.4及以上系统实现沉浸式状态栏

Google允许开发者在Android 4.4以上设置状态栏透明或半透明,布局填充全屏;而在5.0以上可直接设置状态栏颜色。

9310
来自专栏.Net移动开发

.Net语言 APP开发平台——Smobiler学习日志:实现在手机上调用摄像头进行扫描

20110
来自专栏知晓程序

如何「掏空」小程序的五层页面限制? | 技术宝典

12830
来自专栏ytkah

换个字体解决Dreamweaver文字选不中的问题

  在使用Dreamweaver时,有时我们要选中一些字符进行编辑或删除,光标在英文字上面可以选中,在中文字上面就选不中,郁闷吧。比如在编辑下面这段文字的时候,...

26250
来自专栏Google Dart

AngularDart Material Design 应用布局 顶

应用布局 应用程序布局是一个样式,指令和组件系统,当它们一起使用时,可以提供材质外观和感知应用程序的层叠关系。 它根据材料规格提供应用栏,抽屉和导航样式。

19530
来自专栏抠抠空间

Toastr 通知提示插件

Toastr 简介 jquery toastr 一款轻量级的通知提示框插件。 网页开发中经常会用到提示框,自带的alert样式无法调整,用户体验差。 所以一般通...

42490
来自专栏从零开始学 Web 前端

从零开始学 Web 之 移动Web(五)touch事件的缺陷,移动端常用插件

我们在上面《页面分类》的项目中,对 tap 事件的处理使用的是 touch 事件处理的,因为如果使用 click 事件的话,总会有延时。

15020
来自专栏梁源的专栏

使用Visual Studio Code编写Vue的札记

Visual Studio Code文中简称VSCode,使用VSCode编写Vue有一段时间了,觉得很顺手,总结一些经验操作分享给大家,希望对大家学习VSCo...

21.5K90

扫码关注云+社区

领取腾讯云代金券