$(document).ready в google chrome?

Question

[Максим Васильев]

В хроме (17-beta, 16-stable) onload-триггер срабатывает до того, как загружены изображения.



Если из этого триггера вызывается ajax-зарос и хочется показывать юзеру индикатор загрузки с анимированной gif-крутилкой — он его не увидит, потомучто на момент отсыла запроса gif ещё не загружен.



Как быть?

Comments

[Анатолий]

$(document).ready != onload

Answer 1

[Константин Китманов]

Закодируйте gif в base-64 и используйте в CSS data:uri — duris.ru/faq/

Comments

[Максим Васильев]

Спасибо!

Answer 2

[Виталий Желтяков]

А не проще сделать эту gif-ку сразу видимой? Страница же загружается.

Comments

[Максим Васильев]

Тоже можно. Но у меня отправляется несколько запросов. А в качестве индикатора qjeryui-виджет, со счётчиком.

[Виталий Желтяков]

Всё равно не вижу проблемы. Отображайте ваш индикатор сразу, ведь работать он должен сразу.

А то у Вас как-то не логично: «загружаем основную страницу->отображаем индикатор загрузки->продолжаем загрузку->прячем индикатор загрузки»
Проще: «загружаем основную страницы с видимым индикатором->продолжаем загрузку->прячем индикатор»

[Максим Васильев]

У меня:
загружаем основную страницу -> включаем индикатор -> инициируем запрос на сервер, инициируем ещё один запрос на сервер, инициируем запрос на другой сервер -> выключаем индикатор, когда все запросы отработали.

Answer 3

[lashtal]

Он и должен срабатывать до загрузки изображений. Хром тут ни при чем, кстати.
Для изображений есть imagesLoaded ( github.com/desandro/imagesloaded ) из-под masonry.

Answer 4

[Fr3nzy]

В Chrome и Safari, в таких случаях, так же можно использовать $(window).load(), который «выстреливает» лишь после загрузки всякого медиа-контента.

Answer 5

[nikitammf]

событие срабатывает верно, можно написать чтобы вызывались все функции после загрузки картинки

jQuery(function($){
    var loadingImage = new Image();
    loadingImage.onload = function(){
        loadingImage.onload = null;
        //основные функции
    };
    loadingImage.src = "image/loader.gif";
});