27860


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

* * *

**html**

[code]

    <img id="hoge">
    
[/code]

**js**

[code]

    $(document).ready(function(){
      $('#hoge').task();
    });
    
[/code]

* * *
[code]

       (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);
    
[/code]

* * *

**試したこと**

・「$(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() {」部分をリロードしても呼ぶためには、どうすれば良いでしょうか？


CC BY-SA 3.0
2016-07-26T05:37:35.033
27850
2016-07-26T10:31:09.933
7886
question
javascript jquery
画像読み込みを待って処理したい


余談ですが[jquery.load(handler)](http://api.jquery.com/load-
event/)はv1.8から非推薦(deprecated)、v3.0から削除(removed)となっており、現在使用すべきではないAPIです。  
さて本題ですが _load_ イベントはブラウザのキャッシュが有効である場合は発火しないようなので、[jQuery callback on image
load (even when the image is
cached)](https://stackoverflow.com/questions/3877027/jquery-callback-on-image-
load-even-when-the-image-is-cached)などを参考に、読み込みが完了している場合も考慮して実装しなければなりません。  
以下に示す例では、一度呼び出されたら削除されるイベントハンドラを設定する[.one](http://api.jquery.com/one/)メソッドを利用して、まず本来のloadイベント発火を処理するためのイベントハンドラを設定しておき、他方でキャッシュから読み込まれた要素については手動でloadイベントを発火させ処理を実行させています。

[code]

    $.fn.task = function(options) {
        // すべての対象要素に一度だけ有効なloadイベントのイベントハンドラを設定
        this.one('load', function() {
            // 読み込み完了時の処理
        }).each(function() {
            // 対象要素それぞれについて、すでにキャッシュから読み込み完了しているものは、
            // 手動でloadイベントを発火させる
            if (this.complete) {
                $(this).trigger('load');
            }
        });
    };
    
[/code]

参考になりましたら幸いです。


CC BY-SA 3.0
2016-07-26T10:31:09.933
27860
2016-07-26T10:31:09.933
2017-05-23T12:38:56.083
-1
27850
answer