加載的jQuery插件不起作用

Question

我完成了我的第一個jQuery插件後，我開始開發這一塊。但不知何故，這個插件不起作用..我真的不明白有什麼問題，因爲我確定我遵循了插件製作的所有規則。

編輯：所謂「不工作」我的意思是說什麼也不會發生到網頁上的元素。它甚至不會返回錯誤。它只是不起作用。

的jQuery插件是基於正常的JavaScript源： 你可以看到一個工作示例here
和的jsfiddle here

的例子已經取得的JavaScript，而不是jQuery插件

這是我的插件

;(function($){ 

    // We name the function loader 
    $.fn.loader = function (options) { 

     // Default settings - can be replaced by options 
     var defaults = { 
      speed: 5, 
      width: 50, 
      height: 50, 
      totalFrames: 19, 
      frameWidth: 50, 
      color: 'white', 
      loaderTimeout: false, 
      index: 0, 
      Xpos: 0, 
      frameDelay: 0 
     } 

     // Extend the options and defaults to variables 
     var opts = $.extend(defaults, options); 

     // We locate the loader Image 
     var loaderImage = '../../_resources/loading/loading_sprites_'+ opts.color + '_' + opts.height + '.png'; 

     // Now start the Function 
     return this.each(function() { 

      // The original element is defined with a variable 
      var element = $(this); 
      var frameDelay = opts.frameDelay; 

      // We start out by defining the beginning of the animation 
      function startLoader() { 

       // The element is giving the right width and height to contain 
       // the loading animation, and the loaderImage source as background 
       element.width(opts.width).height(opts.height).css('background-image', 'url('+loaderImage+')'); 

       // We calculate the Frames Per Second 
       FPS = Math.round(100/opts.speed); 
       frameDelay = 1/FPS; 

       // And start the animation 
       setTimeout('continueAnimation()', frameDelay/1000); 

      } 

      // To keep the animation on going we need to define a function 
      // that continuesly repeat the sprites 
      function continueAnimation() { 

       var Xpos = opts.Xpos; 
       var index = opts.index; 

       // The X-position is defined based on how wide the frame is 
       Xpos += opts.frameWidth; 

       // index is defined by continuelsy counting 
       index += 1; 

       // if index counts to more or equal to the amount of frames defined 
       if (index >= opts.totalFrames) { 
        Xpos = 0; // ... we set the X-position to be 0 
        index = 0; // ... and the index too 
       } 

       // We change the position og the sprite to give the illusion 
       // of an animation going on 
       element.css('background-position', Xpos + 'px 0'); 

       // And finally we are going to ask our function to repeat itself. 
       setTimeout('continueAnimation()', frameDelay * 1000); 

      } 

      // Before anything we want the sprites to be pre-loaded 
      function imageLoader(source, start) { 

       var loaderTimeout = opts.loaderTimeout; 

       // First we clear Timout 
       clearTimeout(loaderTimeout); 
       loaderTimeout = 0; 

       // Then we generate a new image (the sprites) 
       genImage = new Image(); 

       // When the image is loaded we want to start the animation 
       genImage.onload = function() {loaderTimeout = setTimeout(start, 0)}; 

       // If we can't locate the sprite image, we prepare an error function 
       genImage.onerror = new Function('alert(\'Could not load the image\')'); 

       // And we define the image source 
       genImage.src = source; 
      } 

      // This command starts the whole animation 
      new imageLoader(loaderImage, 'startAnimation()'); 

     }); 
    } 

})(jQuery); 

我打電話給我的插件是這樣的：

$(document).ready(function() { 
    $('.loader').loader({ 
     color: 'blue' 
    }) 
}); 

Answer 1

您的代碼表示：

new imageLoader(loaderImage, 'startAnimation()'); 

而這第二個參數傳遞，爲setTimeout：

genImage.onload = function() {loaderTimeout = setTimeout(start, 0)}; 

但是你的方法被稱爲startLoader()

順便說一句：你應該避免將字符串傳遞給setTimeout/setInterval。它僞裝的eval和eval is evil!

Answer 2

是jQuery的用戶界面的選項？

如果你只是想學習編寫自己的小工具，學什麼「這」的引用，一般做的事情「不容易」的方式，則忽略這個答案:)

如果這是工作和回家阻止你，我強烈建議jquery-ui widget factory。嘗試這個（開了一個會議，並將在扔的jsfiddle如果我能得到他們的時間）：

$(document).ready(function() { 
    $('.loader').loader({ 
     color: 'blue' 
    }) 
}); 
$.widget("pj.loader",{ 
    options:{ 
      speed: 5, 
      width: 50, 
      height: 50, 
      totalFrames: 19, 
      frameWidth: 50, 
      color: "white", 
      loaderTimeout: false, 
      index: 0, 
      Xpos: 0, 
      frameDelay: 0, 
      imgBase: "../../_resources/loading/loading_sprites_" 
     }, 
//called once and only once per widget 
    _create: function(){ 
    var self = this, 
     selectedElement = self.element; 
     self.options.loaderImage = self.options.imgBase + self.options.color + '_' + self.options.height + '.png'; 
     self.imageLoader(self.options.loaderImage, self.startAnimation); 
}, 
    startAnimation : function(){ 
var self = this; 
// The element is giving the right width and height to contain 
       // the loading animation, and the loaderImage source as background 
       element.width(self.options.width).height(self.options.height).css('background-image', 'url('+self.options.loaderImage+')'); 

       // We calculate the Frames Per Second 
       FPS = Math.round(100/self.options.speed); 
       self.options.frameDelay = 1/FPS; 

       // And start the animation 
       setTimeout(self.continueAnimation, self.options.frameDelay/1000); 
}, 
continueAnimation : function(){ 
var self = this, 
    Xpos = self.options.Xpos, 
    index = self.options.index; 

       // The X-position is defined based on how wide the frame is 
       Xpos += self.options.frameWidth; 

       // index is defined by continuelsy counting 
       index += 1; 

       // if index counts to more or equal to the amount of frames defined 
       if (index >= self.options.totalFrames) { 
        Xpos = 0; // ... we set the X-position to be 0 
        index = 0; // ... and the index too 
       } 

       // We change the position og the sprite to give the illusion 
       // of an animation going on 
       element.css('background-position', Xpos + 'px 0'); 

       // And finally we are going to ask our function to repeat itself. 
       setTimeout('continueAnimation()', frameDelay * 1000); 
}, 
imageLoader : function(source, start){ 
var self = this, 
    loaderTimeout = self.options.loaderTimeout; 

       // First we clear Timout 
       clearTimeout(loaderTimeout); 
       loaderTimeout = 0; 

       // Then we generate a new image (the sprites) 
       genImage = new Image(); 

       // When the image is loaded we want to start the animation 
       genImage.onload = function() {loaderTimeout = setTimeout(start, 0)}; 

       // If we can't locate the sprite image, we prepare an error function 
       genImage.onerror = new Function('alert(\'Could not load the image\')'); 

       // And we define the image source 
       genImage.src = source; 
}, 
//optional, called every time $('selector').loader() is called 
    _init: function(){}, 

//recommended optional, called on $('loader.selector').remove() or similar. 
//you should undo all your changes/events in create 
    _destroy: function(){} 
});