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

Edit: Here is the new code:

编辑：这是新代码：

        $("#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"
                    });
                });
            }
        });
    });

Hello.

你好。

Let's say I have a link in "index.php", when I click on that link, it loads, via ajax, a content from a page "content.php" into a div element in "index.php", that has an id of "#content". That content in "content.php" has large images. I want to display an image loader, say "ajax-loader.gif", instead of those large images, until the images are downloaded by client.

假设我在“index.php”中有一个链接，当我点击该链接时，它会通过ajax将页面“content.php”中的内容加载到“index.php”中的div元素中，该元素具有“#content”的id。 “content.php”中的内容具有大图像。我希望显示一个图像加载器，比如“ajax-loader.gif”，而不是那些大图像，直到客户端下载图像。

( I know how to have an image loader .gif for the images on "index.php". )

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

How can I achieve this?

我怎样才能做到这一点？

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

I'd be careful about your layout though... I doubt swopping large images for small loaders is ideal. As a user, I'd prefer to delay the showing of the whole content, until all images have loaded.

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