javascript - 将 pxloader 与 require.js 一起使用

Question

大家好，

我目前正在实现 pxloader我使用 Node.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) 
{});

controller.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库的源码。

任何人都可以告诉我，我的代码中是否有错误，或者只是他的库格式不正确......

(为我的英语不好而道歉)

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

Answer 1

我似乎已经解决了这个问题...我只需要实例化 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;
});