-1

重複の可能性：
画像の読み込み時のjQueryコールバック（画像がキャッシュされている場合でも）

そのため、この.load()メソッドはjQueryで非推奨になりました。load()`bind（'load'、function）のショートカットです。

http://api.jquery.com/load-event/から：

画像で使用する場合のロードイベントの警告

開発者が.load（）ショートカットを使用して解決しようとする一般的な課題は、画像（または画像のコレクション）が完全に読み込まれたときに関数を実行することです。これには、注意すべきいくつかの既知の警告があります。これらは：

一貫性も信頼性もありませんクロスブラウザ画像のsrcが以前と同じsrcに設定されている場合、WebKitで正しく起動しませんDOMツリーを正しくバブルアップしませんすでに存在する画像の起動を停止できますブラウザのキャッシュ内`

画像の読み込みで一貫して機能を実行するにはどうすればよいですか？私の現在のコードは次のようになります。

$(newImage).bind('load', function() {
    createSlices(slide); 
});

ただし、ドキュメントを読んだ後（問題は発生していませんが）、一部のユーザーには起動しない可能性があるのではないかと心配しています。

4

4 に答える 4

2

このプラグインを試してみてください：waitforimagesプラグインと呼ばれます：https ：//github.com/alexanderdickson/waitForImages （リンクを下にスクロールすると、さまざまな高度な使用法が表示されます）-デモ http://jsfiddle.net/FZ7Xy/

それがニーズに合うことを願っています:)

コード

$('selector').waitForImages(function() {
    // All descendant images have loaded, now slide up.
    $(this).slideUp();  
});
于 2012-10-15T22:48:55.983 に答える
1 
var img = new Image();  
img.onload = function() {

} 

img.src=  src-image

上記のコードは、jqueryがなくても、すべてのブラウザーで機能します。

于 2012-10-15T22:48:04.947 に答える
0

心配するのは当然です。特にIE7/8は、画像がキャッシュされている場合、ロードイベントの発生に失敗することがあります。

1つの手法は、ロードイベントをバインドした後、イメージが完了したかどうかをすぐに確認することです。

$(newImage).bind('load error', function() {
    createSlices(slide); 
});

// check if the image is immediately complete (cached)
if (newImage.complete || typeof newImage.complete === 'undefined') {
    createSlices(slide);
}

私は成功を収めてテストしました：

  • IE 7/8/9/10
  • FF4 +
  • クローム（最新）
  • Safari 5+
于 2012-10-15T22:48:26.617 に答える
0

これを正確に処理する優れたライブラリがあります: https://github.com/desandro/imagesloaded

私はそれを生産で使用しましたが、素晴らしく機能します。単一の苦情ではなく、非常に信頼できます。

于 2012-10-15T23:03:27.933 に答える