1

コンテンツは読み込まれたのに、画像がまだ読み込まれているのはなぜですか? コンテンツ (コンテンツの画像を含む) をロードしてからフェードインする方法は?

js

$(document).ready(function(){
    $('#contents').fadeOut('slow', function(){
        $(this).load("url", {}, function(){

            $("#contents").fadeIn('slow', function(){

                alert('Faded in!');

            });

        });

    });
});
4

1 に答える 1

3

これはそれほど単純ではありません。動的にロードされる画像にロード ハンドラーを取得する必要がありますが、ソース HTML を変更しないと、ロードが開始されるまでそれを行うことができません。したがって、動的にロードされたコンテンツ内のすべての画像オブジェクトを取得し、それぞれをチェックしてロードが完了したかどうかを確認する、このようなことを行うことができます。ロードが完了していない場合は、onload ハンドラーがインストールされるため、最後のハンドラーがいつロードを完了したかを数えることができます。すべての読み込みが完了したら、次のことができますfadeIn()。

$(document).ready(function(){
    $('#contents').fadeOut('slow', function(){
        var self = $(this);

        function fadeIn() {
            $("#contents").fadeIn('slow', function(){
                alert('Faded in!');
            });
        }

        self.load("url", {}, function() {
            var imgs = self.find("img");
            var imgsRemaining = imgs.length;
            imgs.each(function() {
                // if the image isn't already loaded, then attach an onload handler
                if (!img.complete || !this.height || !this.width) {
                    this.onload = this.onerror = this.onabort = function() {
                        // decrement imgsRemaining
                        --imgsRemaining;
                        // if no more images to finish loading, then start the fade
                        if (imgsRemaining == 0) {
                            fadeIn();
                        }
                    });
                } else {
                    // this image already loaded
                    --imgsRemaining;
                }
            });
            // if there were no images that weren't loaded yet
            if (imgsRemaining == 0) {
                fadeIn();
            }
        });
    });
});

または、問題を解決するもう少し一般的な方法として、コンテンツをロードし、コンテンツとコンテンツ内のすべての画像の両方のロードが完了したときにコールバックを呼び出す汎用の jQuery メソッドを次に示します。これにより、再利用性が大幅に向上し、おそらくコードが読みやすくなります。次のように使用します.load(url, data, fn) method。

jQuery.fn.loadComplete = function(url, data, fn) {
    // check if optional data argument is missing
    if (typeof data == "function") {
        fn = data;
        data = {};
    }
    // dynamically load the content
    this.load(url, data, function() {
        var self = this;
        // when content is parsed, check to see when all images are loaded
        var imgs = $(this).find("img");
        var imgsRemaining = imgs.length;
        imgs.each(function() {
            if (this.complete) {
                // if image is already loaded, just decrement the count
                --imgsRemaining;
            } else {
                // image not loaded yet, install onload handler
                this.onload = this.onerror = this.onabort = function() {
                    // when img has finished loading, check to see if all images are now loaded
                    if (--imgsRemaining == 0) {
                        fn.call(self);
                    }
                };
            }
        });
        if (imgsRemaining == 0) {
            fn.call(self);
        }
    });
}

したがって、この新しいメソッドを使用すると、コードは次のようになります。

$(document).ready(function(){
    $('#contents').fadeOut('slow', function(){
        $(this).loadComplete("url", {}, function(){
            $("#contents").fadeIn('slow', function(){
                alert('Faded in!');
            });
        });
    });
});
于 2012-06-12T08:13:54.777 に答える