画像読み込みを待って処理したい

現状
・初回のみ意図した通り動作するが、リロードすると期待した通り動作しない

---

html

<img id="hoge">

js

$(document).ready(function(){
  $('#hoge').task();
});

---

   (function($) {
      $.fn.task = function(options) {
      var thisObject = this;
      //中略

      console.log(this); //[img#hoge, context: document, selector: "#hoge"]

      this.load( function() {
        //ここがリロードすると呼ばれなくなる
        var canvas = new Array();
        var canvasContext = null;
        var img = new Image();
        img.src = this.attr('src');
        //中略
      }

    })(jQuery);

---

試したこと

・「$(document).ready(function(){」を「$(window).load(function () {」へ変更
→効果なし

・「this.load( function() {」ではなく、「img.onload =function() {」へ変更
→ Uncaught IndexSizeError: Failed to execute 'getImageData' on 'CanvasRenderingContext2D': The source width is 0

---

質問
・「 this.load( function() {」部分をリロードしても呼ぶためには、どうすれば良いでしょうか？