К сожалению быстрый интернет имеют не все пользователи. В связи с этим возникают некоторые проблемы, одна из проблем — это не прогруженные картинки. Пока картинки не до конца загрузились в некоторых случаях может расползаться верстка или просто сайт будет казаться пустым.
В связи с этой проблемой я решил попробовать немного улучшить ситуацию — написать скрипт, который будет выводить на месте не прогруженных картинок прелоадеры. А после того как картинка будет полностью загружена — прелоадер должен исчезнуть и на его месте появиться картинка.
Код работает очень просто: пока картинка не прогрузилась, прячем ее, а на ее место выводим 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>
Вот и все. Исходники в архиве можно скачать тут
(4 оценок, среднее: 4,50 из 5)