Javascript 正在尝试将jQuery鼠标悬停转换为页面加载

此代码当前仅在鼠标悬停和鼠标移出事件期间加载。我希望它在页面加载时执行。我已尝试将事件修改为。。。但随后它就完全停止工作了。有什么建议吗？另外，关于如何添加复选框以禁用该功能，您有什么建议吗

$(function() {


  $(".sparkley:last").sparkleh({
    color: "rainbow",
    count: 50,
    overlap: 5

  });

});


$.fn.sparkleh = function( options ) {

  return this.each( function(k,v) {

    var $this = $(v).css("position","relative");

    var settings = $.extend({
      width: $this.outerWidth(),
      height: $this.outerHeight(),
      color: "#FFFFFF",
      count: 30,
      overlap: 0,
      speed: 1
    }, options );

    var sparkle = new Sparkle( $this, settings );

    $this.on({
      "mouseover focus" : function(e) {
        sparkle.over();
      },
      "mouseout blur" : function(e) {
        sparkle.out();
      }
    });

  });

}


function Sparkle( $parent, options ) {
  this.options = options;
  this.init( $parent );
}

Sparkle.prototype = {

  "init" : function( $parent ) {

    var _this = this;

    this.$canvas = 
      $("<canvas>")
        .addClass("sparkle-canvas")
        .css({
          position: "absolute",
          top: "-"+_this.options.overlap+"px",
          left: "-"+_this.options.overlap+"px",
          "pointer-events": "none"
         })
        .appendTo($parent);

    this.canvas = this.$canvas[0];
    this.context = this.canvas.getContext("2d");

    this.sprite = new Image();
    this.sprites = [0,6,13,20];
    this.sprite.src = this.datauri;

    this.canvas.width = this.options.width + ( this.options.overlap * 2);
    this.canvas.height = this.options.height + ( this.options.overlap * 2);


    this.particles = this.createSparkles( this.canvas.width , this.canvas.height );

    this.anim = null;
    this.fade = false;

  },

  "createSparkles" : function( w , h ) {

    var holder = [];

    for( var i = 0; i < this.options.count; i++ ) {

      var color = this.options.color;

      if( this.options.color == "rainbow" ) {
        color = '#'+ ('000000' + Math.floor(Math.random()*16777215).toString(16)).slice(-6);
      } else if( $.type(this.options.color) === "array" ) {
        color = this.options.color[ Math.floor(Math.random()*this.options.color.length) ];
      }

      holder[i] = {
        position: {
          x: Math.floor(Math.random()*w),
          y: Math.floor(Math.random()*h)
        },
        style: this.sprites[ Math.floor(Math.random()*4) ],
        delta: {
          x: Math.floor(Math.random() * 1000) - 500,
          y: Math.floor(Math.random() * 1000) - 500
        },
        size: parseFloat((Math.random()*2).toFixed(2)),
        color: color
      };

    }

    return holder;

  },

  "draw" : function( time, fade ) {

    var ctx = this.context;

    ctx.clearRect( 0, 0, this.canvas.width, this.canvas.height );

    for( var i = 0; i < this.options.count; i++ ) {

      var derpicle = this.particles[i];
      var modulus = Math.floor(Math.random()*7);

      if( Math.floor(time) % modulus === 0 ) {
        derpicle.style = this.sprites[ Math.floor(Math.random()*4) ];
     }

      ctx.save();
      ctx.globalAlpha = derpicle.opacity;
      ctx.drawImage(this.sprite, derpicle.style, 0, 7, 7, derpicle.position.x, derpicle.position.y, 7, 7);

      if( this.options.color ) {  

        ctx.globalCompositeOperation = "source-atop";
        ctx.globalAlpha = 0.5;
        ctx.fillStyle = derpicle.color;
        ctx.fillRect(derpicle.position.x, derpicle.position.y, 7, 7);

      }

       ctx.restore();

    }


  },

  "update" : function() {

     var _this = this;

     this.anim = window.requestAnimationFrame( function(time) {

       for( var i = 0; i < _this.options.count; i++ ) {

         var u = _this.particles[i];

         var randX = ( Math.random() > Math.random()*2 );
         var randY = ( Math.random() > Math.random()*3 );

         if( randX ) {
           u.position.x += ((u.delta.x * _this.options.speed) / 1500); 
         }        

         if( !randY ) {
           u.position.y -= ((u.delta.y * _this.options.speed) / 800);
         }

         if( u.position.x > _this.canvas.width ) {
           u.position.x = -7;
         } else if ( u.position.x < -7 ) {
           u.position.x = _this.canvas.width; 
         }

         if( u.position.y > _this.canvas.height ) {
           u.position.y = -7;
           u.position.x = Math.floor(Math.random()*_this.canvas.width);
         } else if ( u.position.y < -7 ) {
           u.position.y = _this.canvas.height; 
           u.position.x = Math.floor(Math.random()*_this.canvas.width);
         }

         if( _this.fade ) {
           u.opacity -= 0.02;
         } else {
            u.opacity -= 0.005;
         }

         if( u.opacity <= 0 ) {
           u.opacity = ( _this.fade ) ? 0 : 1;
          }

       }

       _this.draw( time );

       if( _this.fade ) {
         _this.fadeCount -= 1;
         if( _this.fadeCount < 0 ) {
            window.cancelAnimationFrame( _this.anim );
          } else {
            _this.update(); 
          }
       } else {
         _this.update();
       }

     });

  },

  "cancel" : function() {

    this.fadeCount = 100;

  },

  "over" : function() {

    window.cancelAnimationFrame( this.anim );

    for( var i = 0; i < this.options.count; i++ ) {
      this.particles[i].opacity = Math.random();
    }

    this.fade = false;
    this.update();

   },

  "out" : function() {

    this.fade = true;
    this.cancel();

  },



  "datauri" :     "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABsAAAAHCAYAAAD5wDa1AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyRpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYxIDY0LjE0MDk0OSwgMjAxMC8xMi8wNy0xMDo1NzowMSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNS4xIE1hY2ludG9zaCIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDozNDNFMzM5REEyMkUxMUUzOEE3NEI3Q0U1QUIzMTc4NiIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDozNDNFMzM5RUEyMkUxMUUzOEE3NEI3Q0U1QUIzMTc4NiI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOjM0M0UzMzlCQTIyRTExRTM4QTc0QjdDRTVBQjMxNzg2IiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOjM0M0UzMzlDQTIyRTExRTM4QTc0QjdDRTVBQjMxNzg2Ii8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+jzOsUQAAANhJREFUeNqsks0KhCAUhW/Sz6pFSc1AD9HL+OBFbdsVOKWLajH9EE7GFBEjOMxcUNHD8dxPBCEE/DKyLGMqraoqcd4j0ChpUmlBEGCFRBzH2dbj5JycJAn90CEpy1J2SK4apVSM4yiKonhePYwxMU2TaJrm8BpykpWmKQ3D8FbX9SOO4/tOhDEG0zRhGAZo2xaiKDLyPGeSyPM8sCxr868+WC/mvu9j13XBtm1ACME8z7AsC/R9r0fGOf+arOu6jUwS7l6tT/B+xo+aDFRo5BykHfav3/gSYAAtIdQ1IT0puAAAAABJRU5ErkJggg=="

};


 $.fn.imagesLoaded = function(callback){
  var elems = this.filter('img'),
       len   = elems.length,
      blank = "data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///ywAAAAAAQABAAACAUwAOw==";

  elems.bind('load.imgloaded',function(){
      if (--len <= 0 && this.src !== blank){ 
        elems.unbind('load.imgloaded');
        callback.call(elems,this); 
      }
  }).each(function(){
     // cached images don't fire load sometimes, so we reset src.
      if (this.complete || this.complete === undefined){
        var src = this.src;
        // webkit hack from https://groups.google.com/group/jquery-dev/browse_thread/thread/eee6ab7b2da50e1f
    // data uri bypasses webkit log warning (thx doug jones)
    this.src = blank;
    this.src = src;
 }  
  }); 

  return this;
};

$（函数（）{
$（“.sparkley:last”）.sparkleh({
颜色：“彩虹”，
计数：50，
重叠：5
});
});
$.fn.sparkleh=函数（选项）{
返回此值。每个函数（k，v）{
var$this=$（v）.css（“位置”、“相对”）；
变量设置=$.extend({
宽度：$this.outerWidth（），
高度：$this.outerHeight（），
颜色：“FFFFFF”，
计数：30，
重叠：0，
速度：1
}，选项）；
var sparkle=newsparkle（$this，settings）；
$this.on({
“鼠标悬停焦点”：功能（e）{
闪耀；
},
“鼠标出模糊”：功能（e）{
闪闪发光；
}
});
});
}
函数Sparkle（$parent，options）{
this.options=选项；
this.init（$parent）；
}
Sparkle.prototype={
“init”：函数（$parent）{
var_this=这个；
这是$canvas=
$("")
.addClass（“闪耀画布”）
.css({
位置：“绝对”，
顶部：“-”+_this.options.overlap+“px”，
左：“-”+_this.options.overlap+“px”，
“指针事件”：“无”
})
.appendTo（$parent）；
this.canvas=this.$canvas[0]；
this.context=this.canvas.getContext（“2d”）；
this.sprite=新图像（）；
this.sprites=[0,6,13,20]；
this.sprite.src=this.datauri；
this.canvas.width=this.options.width+（this.options.overlap*2）；
this.canvas.height=this.options.height+（this.options.overlap*2）；
this.particles=this.createSparkles（this.canvas.width，this.canvas.height）；
this.anim=null；
this.fade=false；
},
“createSparkles”：函数（w，h）{
var持有人=[]；
对于（var i=0；iMath.random（）*2）；
var randY=（Math.random（）>Math.random（）*3）；
if（randX）{
u、 position.x+=（（u.delta.x*_this.options.speed）/1500）；
}        
如果（！兰迪）{
u、 position.y-=（（u.delta.y*_this.options.speed）/800）；
}
如果（u.position.x>\u this.canvas.width）{
u、 位置x=-7；
}否则如果（u.position.x<-7）{
u、 position.x=_this.canvas.width；
}
如果（u.position.y>\u this.canvas.height）{
u、 位置y=-7；
u、 position.x=Math.floor（Math.random（）*_this.canvas.width）；
}否则如果（u.position.y<-7）{
u、 position.y=_this.canvas.height；
u、 position.x=Math.floor（Math.random（）*_this.canvas.width）；
}
如果（_this.fade）{
u、 不透明度-=0.02；
}否则{
u、 不透明度-=0.005；
}
如果（u.opacity使用了以下内容：

jQuery(window).on("load", function(){
  sparkle.over();
});

创建一个代码段这对任何人都没有帮助，并显示到目前为止您为实现ITI所做的工作，请将鼠标悬停在“Hello”上方