Question

大家好，

我目前正在实施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库的来源。

任何人都可以告诉我，我的代码中的某些内容是错误的还是只是他的库没有正确格式化...

（为我糟糕的英语道歉）

任何帮助都会受到非常感谢，亚历

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;
});

使用带有require.js的pxloader

1 个答案: