0

私は現在、いくつかの非常に大きな画像を使用したプロジェクトに取り組んでいます。画像が読み込まれたときにスムーズなフェードイン効果を得るには、jQuery 1.9.1でready（）を使用しようとしましたが、何らかの理由で機能せず、読み込まれる前に画像が表示されます。

$("img").ready(function(){
$(this).fadeIn("slow");
});

私は何が間違っているのですか？

編集： ありがとう！私はそれをAdeneoの方法で動作させました：http：//jsfiddle.net/hAm65/

4

3 に答える 3

3

DOCSから、ドキュメントのみに準備完了イベントがあります。

.ready（）メソッドは、現在のドキュメントに一致するjQueryオブジェクトでのみ呼び出すことができます。

次のようなものを試すことができます。

$("img").each(function(i,el){
    var img = new Image();
        img.onload = function() {
            $(el).fadeIn("slow");
        }
        img.src = el.src;
});
于 2013-03-24T20:45:00.167 に答える
2

.readyそれ自体以外の要素を呼び出すことはできませんdocument。代わりにこれを使用してください

$("img").on('load', function(){
  $(this).fadeIn("slow");
});
于 2013-03-24T20:46:05.840 に答える
1

複数の画像を読み込み、すべての画像が終了するのを待つ必要がある場合は、jQueryの遅延オブジェクトを使用してみてください。

function loadImages(src) {
    var deferred = $.Deferred();
    var image = new Image();
    image.onload = function() {
        deferred.resolve();
    };
    image.src = src;
    return deferred.promise();
}

これをこのように使用してください-

var loaders = [];
loaders.push(loadImage('1.png'));
loaders.push(loadImage('2.png'));
loaders.push(loadImage('3.png'));
$.when.apply(null, loaders).done(function() {
    // callback when everything was loaded
});
于 2013-03-24T21:01:22.923 に答える