Как правильно делать предзагрузку для изображений?

Question

[Антон]

Такой вопрос: надо показать прелоадер

$el.find('.fa.fa-spin').show();
					var $img = $el.find('img'),
						img = new Image;
					img.src = $img.data('src');
					img.onload = function(){

						$img.attr('src',$img.data('src'));
						$el.find('.fa.fa-spin').hide();
					}
					}

я исхожу из того, что браузер кэширует изображение по его адресу, и не будет загружать его. Это работает? Просто заменить изображение через $.fn.appendTo не вариант.

2) Есть превью изображения. Надо загрузить его большую версию только заменой src, но пока она не загрузилась, то оставлять превью. Как это сделать?

Comments

[Сергей Наумов]

Если надо победить кеширование, поможет вот такой приёмчик:
.....
img.src = $img.data('src')+'?'+Math.random();
......
:-)

Answer 1

[Евгений Петров]

$(function () {
	$('img[data-src]').each(function () {
		var image = $(this);

		image.attr({
			src: image.data('src')
		}).removeAttr('data-src');

		if (!image.get(0).complete) {
			image.parent().addClass('loading');
			image.bind('load', function () {
				$(this).unbind('load').parent().removeClass('loading');
			});
		}
	});
});

Update (для сохранения превью на время загрузки)

$(function () {
	$('img[data-src]').each(function (index) {
		var image = $(this),
			src = image.data('src'),
			_img = $('<img>', {
				src: src
			});

		if (!_img.get(0).complete) {
			image.parent().addClass('loading');
			_img.bind('load', function () {
				image
					.attr({
						src: src
					})
					.removeAttr('data-src')
					.parent().removeClass('loading');
				_img = null;
			});
		}
	});
});

Comments

[Антон]

спасибо, хороший вариант. вопрос чуть дополнил.

[Евгений Петров]

Просто вводим дополнительный элемент, который нужен только для отслеживания загрузки.
Технически его можно оптимизировать — реализовывать не как переменную, а как свойство, и удалять по мере использования.