Как заставить jQuery грузить изображение целиком?

Question

[The Whiz]

Суть в чем.

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

Знаю, что можно воткнуть jQuery imageloader, но вдруг есть способ лучше и без лишнего dependency?

Answer 1

[Павел Соловьёв]

есть очень быстрый способ это сделать.

создать тег img (сделать скрытым display:none) в его аттрибут src добавить ссылку на картинку, повесить событие load, после загрузки картинки выполниться функция прописанная в load, там выставить свойство display: в inline.

Answer 2

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

//-------------- Функция предварительной загрузки изображений ----------------//
// Рекурсивная функция предварительной загрузки изображений по списку
// Параметры: preload - массив списка изображений, id - порядковый номер загружаемого изображения в массиве
function PreLoad(preload, id) {
	// Обработка первого вызова
	if (!id) id = 0;
	if (id == preload.length) return false;
	// Создаём объект изображения, чем провоцируем загрузку
	preload[id].img = new Image();
	preload[id].img.src = 'images/'+preload[id].src;
	// Рекурсивно повторяем функцию по факту загрузки изображения
	$(preload[id].img).load(function(){ PreLoad(preload, id+1) });
	return false;
}
//----------------------------------------------------------------------------//
// Предвартитеьная загрузка изображений
	PreLoad([{src: "start/start.jpg"},{src: "final.jpg"}]);

Answer 3

[Ольга Стогова]

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

Comments

[The Whiz]

Такой возможности нет, у меня тысячи изображений. Но совет хороший, спасибо.

[Ольга Стогова]

@modernstyle у вас там конкретно? может lazy load поможет? www.appelsiini.net/projects/lazyload/enabled_fadei...

[Ольга Стогова]

@modernstyle www.appelsiini.net/projects/lazyload

[The Whiz]

изображения нужны только по конкретному запросу, так что в LL смысла нет :)