Как правильно организовать загрузку

[amelice]

Хочу странного ))
У меня есть слайдер, в котором первая картинка на сервере выводится в центре, а все остальные урлы к картинкам записываются в data-src к пунктам превью. Вобщем, вот тут все понятно http://codepen.io/amelice/pen/lazAK.
Слайдер работает так, при нажатии на кнопки контрола ( вперед и назад, пункты превью) вытаскивается дата-срс с нужного пункта и пишется в src на центральной картинке.
Проблема в том, что загрузка картинки начинается только когда происходит событие - приходится ждать когда картинка не маленькая.
Мне кажется, что можно как то оптимизировать этот момент, чтоб можно было сразу не грузить все картинки, а по мере необходимости, ну и чтоб не тормозило, как это организовать?

Edited June 18, 2014 by amelice

[nerv]

поставь крутилку на время загрузки картинки - этого будет достаточно

[amelice]

почему достаточно? Объясни суть, плиз )

[mishka]

когда ожидаешь что что-то должно поменятся, а вместо этого ты видишь что ничего не происходит, то появляется не комфортное ощущение что завис браузер, или сломался скрипт.

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

 

Можно загружать не одну картинку, а несколько, например, активную и по одной или несколько с каждой стороны от активной

[Switch74]

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

[amelice]

когда ожидаешь что что-то должно поменятся, а вместо этого ты видишь что ничего не происходит, то появляется не комфортное ощущение что завис браузер, или сломался скрипт.

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

Это понятно, я имею в виду по какому критерию nerv предложил этот вариант.

 

 

Можно загружать не одну картинку, а несколько, например, активную и по одной или несколько с каждой стороны от активной

Как я могу это реализовать? Ведь картинка грузится только когда на img передается src?  И где хранить эти картинки?  

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

я тебя не очень понимаю, если ты про превьюшки, то да , они есть и им передаются собственные сорсы маленьких фото,   а вот сорсы оригинальных фото передаются в data-src. 

 

Edited June 19, 2014 by amelice

[Switch74]

соседние картинки можно подгружать скриптом, создается модель img в её src подставляются нужные нам пути к картинкам, но сам объект не добавляется в дерево визуально.

 

по подгрузке превьюшек: например можно добавить data-src-pre где будет путь до легкой картинки, скрипту говорить грузить сначала ее в src для показа, а data-src грузим выше указанным способом, когда картинка полностью прогрузится, заменяем ей в src ее превьюшку

 

можно глянуть алгоритмы прелоадеров, смысл тот же, оформление только немного другое

[amelice]

соседние картинки можно подгружать скриптом, создается модель img в её src подставляются нужные нам пути к картинкам, но сам объект не добавляется в дерево визуально.

при этом браузер будет трафик есть?  Кажется, что я глупость спрашиваю, потому что да, конечно будет так как он грузит фотки, но все же если объект не добавляется в дом, может ли быть что он не будет кушать трафик?

[Switch74]

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

[mishka]

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

если превью маленькая, а нужная картинка большая, то при растягивании получится не очень красивая картина.

 

 

Можно загружать не одну картинку, а несколько, например, активную и по одной или несколько с каждой стороны от активной

Как я могу это реализовать? Ведь картинка грузится только когда на img передается src?  И где хранить эти картинки?  

все так же, только передавать путь в src не только текущей картинке, но и тем картинкам что рядышком.

[amelice]

если превью маленькая, а нужная картинка большая, то при растягивании получится не очень красивая картина.

так оно и будет.  картины для превью слишком маленькие.

 

все так же, только передавать путь в src не только текущей картинке, но и тем картинкам что рядышком.

у меня картинок рядом нет, если даже создам как их временно прятать?

Пока сделала всех фоток через объект http://codepen.io/amelice/pen/lazAK

 

Edited June 19, 2014 by amelice

[Switch74]

а что мешает сделать превьюшки средние? да и чтобы картинка 600х400 много весила - нужно постараться, и зачем впихивать в эти размеры картинки большего размера?

[amelice]

а что мешает сделать превьюшки средние? да и чтобы картинка 600х400 много весила - нужно постараться, и зачем впихивать в эти размеры картинки большего размера?

Слайдер что я  привела это примерный( личного дизайна)) ) чтоб объяснить логику,  а так слайдер будет другой.  Там  средняя картинка ограничивается областью окна, так что размеры картинок разные, а превьюшки маленькие.

Edited June 19, 2014 by amelice

[Switch74]

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

[mishka]

у меня картинок рядом нет, если даже создам как их временно прятать? Пока сделала всех фоток через объект http://codepen.io/amelice/pen/lazAK

Понял.

У тебя есть пагинация с src для картинок. Ты знаешь какой пункт сейчас активен. Возьми src с соседних и сделай предзагрузку для них. 

new Image().src = '../image.jpg'

[amelice]

Всем спасибо, я суть предварительной загрузки поняла, а дальше подумаю как сделать. 

[amelice]

Остановились на том, что будем крутить крутилку (заботимся о пользователях), как предлагал nerv )) 

Edited June 24, 2014 by amelice