加载jQuery插件不会'；行不通

在我完成第一个jQuery插件之后，我开始开发这个插件。但不知怎么的，这个插件不起作用。。我真的不明白出了什么问题，因为我确信我遵守了插件制作的所有规则

编辑：我所说的“不工作”是指网页上的元素没有任何变化。它甚至不返回错误。它就是不起作用

jQuery插件基于普通javascript源： 您可以看到一个工作示例
还有一把叉子

这些示例是用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'
    })
});

你的密码是：

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

第二个参数将其传递给

setTimeout

：

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

但是您的方法被称为

startLoader（）

---

顺便说一下：您应该避免将字符串传递给

setTimeout

/

setInterval

。它的评估是伪装的，

jQueryUI是一个选项吗

如果您只是想学习编写自己的小部件，请了解“this”引用的内容，并且通常以“不容易”的方式进行操作，然后忽略以下答案：）

如果这是为了工作和阻止你回家，我强烈推荐。试试这个（去开会，如果我能给他们时间，我会给他们一个JSFIDLE）：

---

那是一个流浪汉；刚开始？@user1394965 ya它是，它通常用于插件编码。请扩展到“它不工作”可能没有关系，但您在每次调用时都会用您的选项覆盖默认值。您应该将空对象

{}

作为第一个参数传递给

$.extend（）

。无法回答您的问题，但您有一次：setTimeout（'continueAnimation（）'，frameDelay*1000）；和一次：setTimeout（'continueAnimation（）'，frameDelay/1000）；是故意的吗？谢谢。。。没有解决问题，但我肯定没有发现我打错了。。任何关于写什么的建议（关于setTimeout/setInterval）对于字符串，都要传递函数本身的引用，而不是字符串。例如

setTimeout（startAnimation，0）

代替

setTimeout（'startAnimation（）'，0）

它告诉我这行有一个错误：

self.options.loaderImage=self.options.imgBase+self.options.color+'.'+self.options.height+'.png'我必须在会议结束后查看，检查新选项。imgbase已与“交换”“我有一些问题。。我认为不可能给变量命名为：
self.options.loaderImage
。除此之外，
frameDelay
也是一个选项，因为它没有被放入局部变量中，所以应该像这样编写
self.options.frameDelay
。我只是一个新手，所以这只是我想知道的，因为我觉得这不符合逻辑。嗨，希望你有一个美好的圣诞节和伟大的新年。。你现在能给我看看小提琴吗？这对我来说意义重大。。
$(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(){}
});