1

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


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

1 件の回答 1

5

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

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

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

3
  • 期待通り動作しました! 参考までに教えてください。「jquery.load(handler)はv1.8から非推薦(deprecated)」とのことですが、代替手段としては「.on("load",function(){」や「.one('load', function() {」と書けば良いということでしょうか? "load"自体がv3.0から削除されたわけではなく、"load"の書き方が変更されたということ? loadメソッドが削除され、loadイベントとして設定すれば良い?
    – re9
    Commented 2016年7月26日 23:14
  • 1
    代替は.on("l‌​oad",function(){となりますね。これに限らず、イベントハンドラの設定は.on()メソッドを使うのがいいと思います。3.0以降はイベントハンドラを設定するメソッドとしての機能は削除され、.load( url [, data ] [, complete ] )としてajaxによる非同期のコンテンツ読み込みメソッドとして利用されます。参考ソース
    – user15182
    Commented 2016年7月27日 2:53
  • なるほど。「.on("l‌​oad",function(){」で、ajaxによる非同期のコンテンツ読み込みメソッドとして利用されるわけですね。何か書き方変わっただけではなく、代替コード内容を確認することも大事だと思いました
    – re9
    Commented 2016年7月28日 1:29

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。