0

編集：これが新しいコードです：

        $("#normalcontent").hide("fast").load($this.attr("href") +" #normalcontent","",function(){
        $(this).slideDown("normal");
        $(this).find("img").each(function(){
            if($(this).hasClass("large"))
            {
                var myThis=$(this);
                myThis.css("display","none");
                var img = new Image();
                $(img).attr("src", "images/ajax-loader.gif");
                $(img).css({
                    border:"none",
                    width:"16px",
                    height:"11px"
                });
                myThis.after(img);
                myThis.load(function(){
                    $(img).remove();
                    myThis.fadeIn("normal");
                })
                .error(function(){
                    $(img).attr("src","images/errorIcon.png").css({
                        border:"none",
                        width:"14px",
                        height:"14px"
                    });
                });
            }
        });
    });

こんにちは。

「index.php」にリンクがあるとしましょう。そのリンクをクリックすると、ajax を介してページ「content.php」のコンテンツが「index.php」の div 要素にロードされます。 「#content」のid。「content.php」のそのコンテンツには大きな画像があります。画像がクライアントによってダウンロードされるまで、これらの大きな画像の代わりに、「ajax-loader.gif」などの画像ローダーを表示したいと思います。

(「index.php」の画像用に画像ローダー .gif を使用する方法を知っています。)

どうすればこれを達成できますか？

4

1 に答える 1

1 
$('#blah').load('/index.php #content', function () {
    $(this).find('img').each(function () {
        var self = $(this),
            replacee = $('<img src="/ajax-loader.gif/>');

        this.onload = function () {
            replacee.replaceWith(self);
        };

        self.replaceWith(replacee);
    });
});

ただし、レイアウトには注意が必要です...大きな画像を小さなローダーに交換するのが理想的だとは思いません。ユーザーとして、すべての画像が読み込まれるまで、コンテンツ全体の表示を遅らせたいと思います。

于 2010-06-08T08:29:16.210 に答える