Question

编辑：以下是新代码：

        $("#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元素中，其id为“#content”。 “content.php”中的内容具有大图像。我希望显示一个图像加载器，比如说“ajax-loader.gif”，而不是那些大图像，直到客户端下载图像为止。

（我知道如何为“index.php”上的图像设置图像加载器.gif。）

我怎样才能做到这一点？

Answer 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);
    });
});

我对你的布局要小心......我怀疑为小型装载机拍大幅图像是理想的选择。作为用户，我宁愿延迟显示整个内容，直到所有图像都已加载。

在jQuery中使用ajax收集的另一个页面中的图像的加载器

1 个答案: