LINUX.ORG.RU

Image preloading

 , ,


0

1

Есть html-страничка с большим количеством картинок. Все картинки немного разного размера, определить его и захардкодить в html'ку я не могу. Суть в том, что при открытии страницы по якорю где-то в конце она «прыгает», потому что картинки подгружаются постепенно и контент расширяется. Решением было бы указать в html свойства width и height для картинок, чтобы они не ресайзились при подгрузке, но я не знаю размеров картинок до того, как они загрузятся. Есть ли какой-то способ сделать это через css или js?

Заранее благодарю.

★★★★★
Ответ на: комментарий от special-k

Это не очень хороший вариант, ведь страница все равно будет немного прыгать при этом. Но спасибо за идею.

vurdalak ★★★★★
() автор топика
Ответ на: комментарий от vurdalak

будет немного прыгать

Ну где-то конечно сместится, либо выше, либо ниже картинки (как реализуешь). Добавь картинку не сразу, а плавно увеличивая высоту.

special-k ★★★★
()
Последнее исправление: special-k (всего исправлений: 1)

http://stackoverflow.com/a/623174

var img = document.getElementById('imageid'); 
//or however you get a handle to the IMG
var width = img.clientWidth;
var height = img.clientHeight;

и повесить распределение картинок на onload?

anonymous
()

Посмотри jq-плагин imgCenter, там картинки скрываются, вешается таймер проверки полной загрузки, после этого уже обработка. Плюс есть возможность задать колбек при завершении. На него по идее можно повесить повторный скролл через jq.scrollTo. Как-то так.

ollowtf ★★★
()

Пользоваться браузером, который переходит не сразу.

anonymous
()
Ответ на: комментарий от special-k

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

vurdalak ★★★★★
() автор топика
Ответ на: комментарий от ollowtf

Мне не нужен повторный скролл, мне нужен способ задать места для картинок изначально. Иначе пользователь не сможет скроллить, пока все картинки не подгрузились.

vurdalak ★★★★★
() автор топика
Ответ на: комментарий от vurdalak

Почему не сможет? Пока пользователь скроллит без картинок, эти самые картинки подгружаются. Как все подгрузятся - колбек. Перед «включением» картинок запомни позицию какого-нибудь текущего элемента, а после перепозиционируйся. Думаю, что это реализуемо.

ollowtf ★★★
()
Ответ на: комментарий от Ja-Ja-Hey-Ho

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

vurdalak ★★★★★
() автор топика
Ответ на: комментарий от anonymous

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

vurdalak ★★★★★
() автор топика
Ответ на: комментарий от vurdalak

Кому-то нужно будет залить новые. Очевидно же! // другой ононимус

anonymous
()

Лучше пройдись скриптом по картинкам и базе. Не стоит городить костыли.

ritsufag ★★★★★
()

Высоту контейнера картинок можно ограничить. По загрузке можно увеличить.

И вообще, почему нельзя захардкодить? Что мешает на сервере во время генерации хтмл вставить размер?

Kalashnikov ★★★
()
Ответ на: комментарий от Kalashnikov

Мешает две вещи:

1) На этапе генерации html этот размер неизвестен.

2) Если все-таки взять и считать эти размеры из файлов на этапе генерации, то возникает нагрузка на сервер. Я бы хотел переложить ее на клиента.

vurdalak ★★★★★
() автор топика

при загрузке страницы вывали в js переменную список ссылок на картинки, после загрузки циклом пройдись по этому списку, загрузи их в невидимые блоки, запомни позицию скролла, сделай блоки видимыми, верни скролл на место. как-то так.

NeverLoved ★★★★★
()
Ответ на: комментарий от vurdalak

2) Если все-таки взять и считать эти размеры из файлов на этапе генерации, то возникает нагрузка на сервер. Я бы хотел переложить ее на клиента.

LOL.

Перед тем как говорить про какую-либо нагрузку, сначала измерь её.

tensai_cirno ★★★★★
()
Вы не можете добавлять комментарии в эту тему. Тема перемещена в архив.