使用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拋出每次我打電話pxloader.add（..）方法時出現錯誤。

"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庫的來源。

任何人都可以請告知我是否有什麼東西在我的代碼是錯誤的或者這只是他的庫沒有被正確格式化...

（抱歉我的英文不好）

任何幫助將是greatily讚賞， Alex

來源

2014-10-09 Wracker

你說，當你調用'PxLoader.add（...）'產生'TypeError'。很公平？但是什麼特定的代碼生成它？用你在這裏給出的信息，可能是它在**'PxLoader.add'內生成**。請爲您的問題添加精確的堆棧跟蹤。 – Louis 2014-10-09 16:13:56

我已經用完整的堆棧跟蹤更新了主帖子。順便說一句。在第31行有第一個PxLoader.add（）調用。 – Wracker 2014-10-10 06:27:08

我已經測試了沒有require.js的庫，它的工作沒有任何問題。我懷疑require.js沒有正確加載庫。 – Wracker 2014-10-10 06:35:15

我似乎已經解決了這個問題......我只需要實例化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; 
});

來源

2014-10-10 07:26:10 Wracker

使用pxloader與require.js

回答

相關問題