web-dev-qa-db-ja.com

画像ロード時のjQueryコールバック（画像がキャッシュされている場合でも）

私はやってみたいです：

$("img").bind('load', function() {
  // do stuff
});

しかし、imageがキャッシュからロードされてもloadイベントは発生しません。 これを修正するためにjQueryのドキュメント は プラグイン を提案していますが、 動作しません

jqueryimagejavascript-eventsjquery-load
273
Tom Lehman

srcがすでに設定されている場合は、イベントハンドラがバインドされる前であっても、キャッシュされたケースではイベントが発生しています。これを修正するために、次のように.completeを基にしたイベントのチェックとトリガーを繰り返すことができます。

$("img").one("load", function() {
  // do stuff
}).each(function() {
  if(this.complete) {
      $(this).load(); // For jQuery < 3.0 
      // $(this).trigger('load'); // For jQuery >= 3.0 
  }
});

.bind() から .one() への変更に注意してください。 2回実行してください。

551
Nick Craver

DOM以外の画像オブジェクトにリロードすることをお勧めできますか？それがキャッシュされている場合、これはまったく時間がかかりません、そしてonloadはまだ起動します。キャッシュされていない場合は、イメージがロードされたときにonloadが起動されます。これは、DOMバージョンのイメージのロードが終了するのと同じ時間になります。

Javascript：

$(document).ready(function() {
    var tmpImg = new Image() ;
    tmpImg.src = $('#img').attr('src') ;
    tmpImg.onload = function() {
        // Run onload code.
    } ;
}) ;

更新されました（複数の画像を処理し、正しく順序付けられたオンロード添付ファイルを使用）。

$(document).ready(function() {
    var imageLoaded = function() {
        // Run onload code.
    }
    $('#img').each(function() {
        var tmpImg = new Image() ;
        tmpImg.onload = imageLoaded ;
        tmpImg.src = $(this).attr('src') ;
    }) ;
}) ;
43
Gus

私の簡単な解決策は、外部プラグインを必要とせず、一般的なケースでは十分なはずです。

/**
 * Trigger a callback when the selected images are loaded:
 * @param {String} selector
 * @param {Function} callback
  */
var onImgLoad = function(selector, callback){
    $(selector).each(function(){
        if (this.complete || /*for IE 10-*/ $(this).height() > 0) {
            callback.apply(this);
        }
        else {
            $(this).on('load', function(){
                callback.apply(this);
            });
        }
    });
};

このように使用してください。

onImgLoad('img', function(){
    // do stuff
});

たとえば、ロード時に画像をフェードインするには、次のようにします。

$('img').hide();
onImgLoad('img', function(){
    $(this).fadeIn(700);
});

あるいは、jqueryプラグインのようなアプローチを好むのであれば、代わりに：

/**
 * Trigger a callback when 'this' image is loaded:
 * @param {Function} callback
 */
(function($){
    $.fn.imgLoad = function(callback) {
        return this.each(function() {
            if (callback) {
                if (this.complete || /*for IE 10-*/ $(this).height() > 0) {
                    callback.apply(this);
                }
                else {
                    $(this).on('load', function(){
                        callback.apply(this);
                    });
                }
            }
        });
    };
})(jQuery);

そしてこれを次のように使ってください。

$('img').imgLoad(function(){
    // do stuff
});

例えば：

$('img').hide().imgLoad(function(){
    $(this).fadeIn(700);
});
35
guari

本当にjQueryでやる必要がありますか？ onloadイベントを画像に直接添付することもできます。

<img src="/path/to/image.jpg" onload="doStuff(this);" />

イメージがロードされるたびに、キャッシュから、あるいはそうでなくても起動します。

22
Björn

読み込みエラーをサポートしてこのコードを使用することもできます。

$("img").on('load', function() {
  // do stuff on success
})
.on('error', function() {
  // do stuff on smth wrong (error 404, etc.)
})
.each(function() {
    if(this.complete) {
      $(this).load();
    } else if(this.error) {
      $(this).error();
    }
});
15
Piotr Stępniewski

私は自分自身でこの問題を抱えていて、キャッシュを殺したりプラグインをダウンロードしたりしないような解決策を至る所で探しました。

私はこのスレッドをすぐには見ませんでしたので、何か他のものを見つけました。これは興味深い修正であり、（ここで）投稿する価値があります。

$('.image').load(function(){
    // stuff
}).attr('src', 'new_src');

私は実際にここのコメントからこの考えを得ました： http://www.witheringtree.com/2009/05/image-load-event-binding-with-ie-using-jquery/

なぜそれが機能するのか私にはわかりませんが、私はIE7でこれをテストし、それが今機能する前にどこでそれが壊れたかを調べました。

それが役に立てば幸い、

編集する

受け入れられた答えは実際になぜ説明します：

Srcがすでに設定されている場合は、イベントハンドラがバインドされる前に、イベントはキャッシュ内で発生します。

13
Sammaye

JQueryを使用してイメージのsrcを使用して新しいイメージを生成し、それに直接loadメソッドを割り当てることによって、jQueryが新しいイメージの生成を終了したときにloadメソッドが正常に呼び出されます。これは私のためにIE 8、9、10で働いています

$('<img />', {
    "src": $("#img").attr("src")
}).load(function(){
    // Do something
});
4
nick

GUSの例に対する修正：

$(document).ready(function() {
    var tmpImg = new Image() ;
    tmpImg.onload = function() {
        // Run onload code.
    } ;

tmpImg.src = $('#img').attr('src');
})

Onloadの前後にソースを設定します。

4
Chuck Conway

私が見つけた解決策 https://bugs.chromium.org/p/chromium/issues/detail?id=7731#c12 （このコードは直接コメントから）

var photo = document.getElementById('image_id');
var img = new Image();
img.addEventListener('load', myFunction, false);
img.src = 'http://newimgsource.jpg';
photo.src = img.src;
4
AllisonC

Imgオブジェクトが定義された後に、src引数を別の行に追加するだけです。これはIEをだましてladイベントを起動させます。それは醜いですが、それは私がこれまでに見つけた最も簡単な回避策です。

jQuery('<img/>', {
    src: url,
    id: 'whatever'
})
.load(function() {
})
.appendTo('#someelement');
$('#whatever').attr('src', url); // trigger .load on IE
3
Bjørn T. Dahl

あなたがこのようにしたいならば、私はあなたにちょっとしたヒントを与えることができます：

<div style="position:relative;width:100px;height:100px">
     <img src="loading.jpg" style='position:absolute;width:100px;height:100px;z-index:0'/>
     <img onLoad="$(this).fadeIn('normal').siblings('img').fadeOut('normal')" src="picture.jpg" style="display:none;position:absolute;width:100px;height:100px;z-index:1"/>
</div>

ブラウザが写真をキャッシュするときにそうするならば、それは問題ではありませんimgが表示されますが、実際の写真の下でimgをロードすること。

1
Josephy Besim

E.target.widthが未定義であるIEでこの問題がありました。 loadイベントは発生しますが、IEの画像の大きさを取得できませんでした（chrome + FFが有効）。

e.currentTarget.naturalWidth＆e.currentTarget.naturalHeightを探す必要があることがわかりました。

繰り返しになりますが、IEはそれ自身の（より複雑な）方法を行います。

1
Ali

JAIL プラグインを使用して問題を解決することもできます。これにより、画像を遅延ロードし（ページのパフォーマンスを向上させる）、を渡すこともできます。パラメータとしてのコールバック

$('img').asynchImageLoader({callback : function(){...}});

HTMLは次のようになります。

<img name="/global/images/sample1.jpg" src="/global/images/blank.gif" width="width" height="height" />
0
sebarmeli

純粋なCSSソリューションが必要な場合は、このトリックがうまく機能します - transformオブジェクトを使用してください。画像がキャッシュされているかどうかにかかわらず、これも画像で動作します。

CSS：

.main_container{
    position: relative;
    width: 500px;
    height: 300px;
    background-color: #cccccc;
}

.center_horizontally{
  position: absolute;
  width: 100px;
  height: 100px;
  background-color: green;
  left: 50%;
  top: 0;
  transform: translate(-50%,0);
}

.center_vertically{
  position: absolute;
  top: 50%;
  left: 0;
  width: 100px;
  height: 100px;
  background-color: blue;
  transform: translate(0,-50%);
}

.center{
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100px;
  height: 100px;
  background-color: red;
  transform: translate(-50%,-50%);
}

HTML：

<div class="main_container">
  <div class="center_horizontally"></div>
  <div class="center_vertically"></div>
  <div class="center"></div>
  </div>
</div

コードペンの例

Codepen LESSの例

0
neoRiley