H5页面加载页效果

来源：互联网发布：收藏加购软件编辑：程序博客网时间：2024/05/22 14:03

使用resLoader.js

引入resLoader.js文件，下载地址：点击此处直接下载
在js里面写入下面代码

 var loader = new resLoader({      resources: [        'img/2.png',        'img/4.png'      ],      onStart: function(total) {},      onProgress: function(current, total) {        var percent = parseInt(current / total * 100) + '%';        $('.pace-progress').text(percent); //显示百分号的地方      },      onComplete: function(total) {        $('.loading').hide(); //关闭加载      }    });    loader.start();

使用create.js家的preload.js

引入create.js和preloader.js，下载地址：点击此处官网下载
然后写入下面代码

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>预加载</title>    <script src="../easeljs-0.8.2.min.js"></script>    <script src="../preloadjs.min.js"></script></head><body><canvas id="myCanvas" width="350" height="420"></canvas><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: "http://cdn.gbtags.com/EaselJS/0.7.1/easeljs.min.js",            id: "easeljs"        }, {            src: "../img/1.jpg",            id: "logo"        }, {            src: "../sound/po.m4a",            id: "audiofile"        }];        for (var i = 1; i <= 10; i++) {            manifest.push({src: "../img/2.jpg"})        }    }    //开始预加载    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) + " %"; //此处的代码是写进canvas里面的，自己也可以直接写入dom元素里面        stage.update();    }    //全度资源加载完毕    function loadComplete(event) {        console.log("已加载完毕全部资源");    }    setupManifest();    startPreload();</script></body></html>

阅读全文

0 0