Прелоадер на месте еще не подгруженной картинки

Прелоадер на месте еще не подгруженной картинкиК сожалению быстрый интернет имеют не все пользователи. В связи с этим возникают некоторые проблемы, одна из проблем — это не прогруженные картинки. Пока картинки не до конца загрузились в некоторых случаях может расползаться верстка или просто сайт будет казаться пустым.
В связи с этой проблемой я решил попробовать немного улучшить ситуацию — написать скрипт, который будет выводить на месте не прогруженных картинок прелоадеры. А после того как картинка будет полностью загружена — прелоадер должен исчезнуть и на его месте появиться картинка.

Код работает очень просто: пока картинка не прогрузилась, прячем ее, а на ее место выводим gif картинку прелоадера. После того как картинка погрузится — уберем прелоадер и показываем картинку.
Код я оформил в виде маленького jQuery плагина:

(function($){
	$.fn.myPreloadImg = function(options){
		// параметры плагина
		options = $.extend({
			preloaderImg: "./preloader.gif" // путь до прелоадера
		}, options);
		
		// действия после загрузки картинки
		function finish_load(){
			// убираем прелоадер,
			// выводим картинку
			// и удаляем однопиксельную картинку
			var elementImg = $(this);
			var imgSrc = $(this).attr('img_src');
			elementImg.attr('src', imgSrc);
			elementImg.attr('img_src', '');
			$('img').each(function(){
				if($(this).attr('img_src') == elementImg.attr('src')){
					$(this).attr('src', elementImg.attr('src'));
					elementImg.remove();
				}
			});
		}
		
		// действия при вызове плагина
		var make = function(){
			var element = $(this);
			var imgSrc = element.attr('src');	
			element.attr('img_src', imgSrc);
			element.attr('src', options.preloaderImg);
			// создаем пиксель и прячем его с глаз долой :) 
			// пока картинка не прогрузится
			var hideImg = $('<img>', {
				src: imgSrc,
				style: 'position: absolute; top: -1px; left: -1px; width: 1px;'
			});
			$('body').append(hideImg);
			// указываем, что делать, когда спрятанная картинка прогрузится
			hideImg.bind('load', finish_load);
		};
 
		// метод myTestCarusel вернет объект jQuery обратно
		return this.each(make); 
	};
})(jQuery);

Использовать его можно вот так:

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script src="./jquery.js"></script>
<script src="./myPreloadImg.js"></script>

<script>
$(document).ready(function(){	
	$('img').myPreloadImg();
});
</script>

<body>
	<img src="./test.jpg?v=1" width="300" />
	<img src="./test.jpg?v=2" width="300" />
</body>

Вот и все. Исходники в архиве можно скачать тут

Рассказать друзьям:


Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

*