Как определить момент загрузки всех картинок через AJAX?

Question

[Виталий Богряшов]

Зачем собственно это надо - после загрузки статьи, нужно переместиться в конец статьи.
В чем проблемы:
1. размеры картинок изначально не известны, поэтому нельзя рассчитать высоту конечной статьи.
2. событие $.ajax.done()срабатывает только на загрузку пустой страницы, без учета картинок.
3. даже если после каждой картинки проматывать скролл, будет дергаться страница на каждой картинке.
4. даже если определить конечную высоту статьи, все равно нужно дождаться загрузки всех картинок, т.к. последняя картинка немного сместит скролл обратно.

Нужно определить точку входа функции в которой уже можно будет сделать $( "html" ).scrollTop( 999999 ).

Данная задача возникла с применением inline-режима CKEDITOR. То есть редактирование готовой страницы прямо в DIV-блоке. В этот DIV-блок как раз и подгружается статья, при загрузке которой нужно всегда быть "у курсора", т.е. в конце статьи.

Answer 1

[Dmitry Pavlov]

$(window).on("load", function() {
    // scroll в конец страницы
});

Comments

[Виталий Богряшов]

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

[Dmitry Pavlov]

попробуйте оттолкунуться от этого

$("img").one("load", function() {
// do stuff
}).each(function() {
if(this.complete) $(this).load();
});

stackoverflow.com/questions/3877027/jquery-callbac...

Answer 2

[Loot]

$('img').on("load", function() {

});

Answer 3

[Александр Таратин]

Задайте тегам img на сервере атрибуты width и height чтобы не скакало.
Также будет неплохо обернуть все картинки в div с фиксированными размерами и background-color равному главному цвету изображения.
Используйте прогрессивный jpeg.

Comments

[Александр Таратин]

MaxKorz: Как размеры картинок могут быть не известны на сервере? Даже если грузяться с другого сервера, можно скачать первые чанки изображений и прочекать размер.

[Виталий Богряшов]

"можно скачать первые чанки изображений и прочекать размер" - данный подход не стоит того чтобы настолько усложнять код.
Цель задачи простая - нужно всего лишь, при открытии статьи переходить в ее конец, для возможности продолжить ее дописывание (что-то типа редактируемого протокола работ). Это ее использование в 90% случаях. В остальных 10% прокрутка не требуется, но несложно будет просто пролистать статью к нужному месту. Размеры статьи могут превышать 1000 строк (пока). Кол-во картинок (скриншотов в основном) может достигать кол-ва строк, то есть их подгрузка даже в локальной сети может длиться 10 сек и более (дальнейшая оптимизация будет уже по надобности).
Сейчас нужно просто промотать в конец и все. Подойдут и такие варианты (если не еще сложнее): сменить ориентацию скроллера, чтобы он по-умолчанию сразу показывал низ, или, какой-то кастомный скроллер, который уже умеет подобные вещи.