Загрузчик для изображений, которые находятся на другой странице, собранные с помощью ajax, в jQuery - PullRequest
Новая
       15

Загрузчик для изображений, которые находятся на другой странице, собранные с помощью ajax, в jQuery

0 голосов
/ 08 июня 2010

Редактировать: Вот новый код: 

        $("#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.

Допустим, у меня есть ссылка в "index.php", когда я нажимаю на эту ссылку, она загружает через ajax содержимое страницы "content.php" в элемент div в "index.php" который имеет идентификатор "#content". Этот контент в "content.php" имеет большие изображения. Я хочу отобразить загрузчик изображений, скажем «ajax-loader.gif», вместо этих больших изображений, пока изображения не будут загружены клиентом.

(Я знаю, как получить загрузчик изображений .gif для изображений на «index.php».)

Как мне этого добиться?

1 Ответ

1 голос
/ 08 июня 2010 
$('#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);
    });
});

Я был бы осторожен с вашей компоновкой, хотя ... Я сомневаюсь, что создание больших изображений для небольших загрузчиков идеально. Как пользователь, я бы предпочел отложить показ всего содержимого до тех пор, пока не загрузятся все изображения.

...