javascript - 使用pxloader与require.js

大家好，

我目前正在实现pxloader js库，以预加载我所有站点的图像。
但这不愿意与require.js一起工作..我不确定我是在正确初始化库还是库是否格式正确以通过require.js加载。

请参见以下示例：

index.jsp

<script src="jscripts/lib/require.js" data-main="jscripts/common"></script>
<script> require(['./app/Preloader/controler']); </script>

common.js

requirejs.config({
    baseUrl: 'jscripts',
    paths: {
        jquery: 'lib/jquery/jquery',
        domReady: 'lib/domReady',
        PxLoader: 'lib/pxloader/PxLoader',
        PxLoaderImage: 'lib/pxloader/PxLoaderImage',
        Preloader: 'lib/preloader/img_preloader',
    }
    });

requirejs(['jquery', 'domReady', 'Cookies'], function ($, domReady,  cookies, img_preloader)
{});

constroler.js

require(['common'], function()
{
    require(['Preloader', 'domReady', 'PxLoader'], function(Preloader,domReady,pxloader ){

        var preloader = new Preloader();
        domReady(function ()
        {
            preloader.LoadImagesDB(function(){ console.log('OK');});
        });
    });
});

img_preloader.js

define(function (require) {
    function Preloader() {
    }

    Preloader.prototype = (function ()
    {
        var PxLoaderImage = require('PxLoaderImage');
        var PxLoader = require('PxLoader');

        var LoadImagesDB = function (ok_callback)
        {
            ...
            PxLoader.add(PxLoaderImage("image1.png"));
            PxLoader.add(PxLoaderImage("image2.png"));
            ...

            PxLoader.addProgressListener(function(e) {
                percent = Math.round( e.completedCount / e.totalCount * 100 );
                $("#progress").html(percent);
            });

            PxLoader.addCompletionListener(function(e) {
                ok_callback();
            });

            PxLoader.start();
        },

        return{
            LoadImagesDB : LoadImagesDB
        };
    })();
return Preloader;
});

现在，每次我调用pxloader.add（..）方法时，Pxloader都会引发错误。

"Uncaught TypeError: undefined is not a function
  img_preloader.js:31 LoadImagesDB
  img_preloader.js:31(anonymous function)
  controler.js:8 runCallbacks
  domReady.js:20 callReady
  domReady.js:31 pageLoaded"

Here您可以找到上述Pxloader库的源代码。

谁能告诉我我的代码中是否有错误或只是库没有正确格式化...

（为我的英语不好而道歉）

任何帮助将不胜感激，
亚历克斯

最佳答案

我似乎已经解决了该问题……我只需要实例化Pxloader（）对象。

img_preloader.js

define(['PxLoader', 'PxLoaderImage', 'Cookies'], function( PxLoader, PxLoaderImage, cookies)
    function Preloader() {
    }

    Preloader.prototype = (function ()
    {
        var loader = new PxLoader();

        var LoadImagesDB = function (ok_callback)
        {
            ...
            loader.add(PxLoaderImage("image1.png"));
            loader.add(PxLoaderImage("image2.png"));
            ...

            loader.addProgressListener(function(e) {
                percent = Math.round( e.completedCount / e.totalCount * 100 );
                $("#progress").html(percent);
            });

            loader.addCompletionListener(function(e) {
                ok_callback();
            });

            loader.start();
        },

        return{
            LoadImagesDB : LoadImagesDB
        };
    })();
return Preloader;
});