$（ 'img'）に問題があります。load（function（）{something}）; ieとfirefox

Question

ここに私のコードです。これは、画像をクラスproductImageに垂直に配置します。クラス内にはたくさんの画像があります。これはクロムでうまく動作します。しかし、それはまったく、そして、そして、ファイアフォックス。私は何が起こっているのか理解できません。画像がロードされているときには何かがあると思います。私はそれぞれのイメージにロードイベントをバインドすることによって、イメージが起動するまで常にロードされるまで待機しますが、時にはそうではありません。誰かがこれについていくつかの光を当てることができますか？

$('img.productImage').each(function(){ 
var jproductImage = $(this); 

jproductImage.load(function(){ 
    jproductImage.css({ 
    'margin-left' : -jproductImage.width()/2 + 'px', 
    'margin-top': -jproductImage.height()/2 + 'px' 
    }); 
}); 

}); 

おかげで、 マット

Answer 1

画像がブラウザによってキャッシュされ、.loadイベントが発生しない可能性があります。あなたは、各画像に.completeプロパティのためにテストすることによって、この問題を回避することができ、それが設定されている場合は、手動で.loadイベントをトリガー：

$('img.productImage').one("load",function() { 
    $(this).css({ 
     'margin-left': $(this).width()/2 + 'px', 
     'margin-top': $(this).height()/2 + 'px' 
    }); 
}).each(function() { 
    if(this.complete) $(this).trigger("load"); 
}); 

また、あなたの外側.eachは少し冗長です。上記がすべて必要です。

Answer 2

.LOADは、画像、crossbrowserに単純に信頼できません。例えば、キャッシュからイメージを読み込むときにFirefoxは起動しません。 jQuery docs for .loadをチェックしてください。

1つのセクションを読み取り：loadイベントの

警告共通の課題開発者は（.LOADを使用して解決しようとする画像

で使用される）ショートカットときに画像が（関数を実行することですまたは画像の収集）が完全にロードされている。注意すべきいくつかの既知の警告があります。これらは次のとおりである：

それは一貫して動作も確実にクロスブラウザ
ていませんそれはバブル正しくない
前の画像SRCが同じSRCに設定されている場合は、WebKitの中で正しく起動しません。 DOMツリー
はそれのLoadイベントにハンドラをバインド、すでにイメージオブジェクトを作成し、私の経験では、ブラウザのキャッシュに

をライブ映像のために火を中止した後、SRCを設定すると、その場合は、より確実に動作することができ戦略が可能です。

Answer 3

jプロダクトイメージの前に-とは何ですか？

$('img.productImage').each(function(){ 
    var jproductImage = $(this); 

    jproductImage.css({ 
    'margin-left' : '-'+jproductImage.width()/2 + 'px', 
    'margin-top': '-'+jproductImage.height()/2 + 'px' 
    }); 

}); 

これはあなたが探しているものですか？