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 回答