Пост загрузка картинок на сайте средствами jQuery

Как часто необходимо загрузить на страницу сайта большое количество изображений, например для галереи. А что если к примеру они все должны находиться на главной странице? Это значительно увеличивает размер страницы, а значит и время загрузки. Здесь представлено одно из решений.

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

Способ пост загрузки картинок реализован на JavaScript c использованием jQuery.

Ниже представлен код с описанием

<!-- Не забываем подключить jQuery -->
<script type="text/javascript" src="jquery.js"></script>
 
<!-- БЛОК с картинками, 
вместо "src" пишем "class", поэтому картинка не загружается -->
<div id="images-blok">
	<div><img class="1.jpg" /></div>
	<div><img class="2.jpg" /></div>
	<div><img class="3.jpg" /></div>					
</div>
 
<script type="text/javascript">
// Функция которая 
//заменяет class на src во всех img в блоке с айдишником images-blok
$(function() {
var changeAttr = function(){
$("#images-blok div img[class]").each(function(){
$(this).attr("src",$(this).attr("class")).removeAttr("class");
})
} 
 
// Вызов функции замены значений через 10 секунд, после загрузки страницы
setTimeout(function(){
changeAttr()},
10000);
}) 
</script>

Вот и все, пост загрузка реализована, теперь картинки загрузятся через 10 секунд после того как пользователь открыл страницу, из плюсов меньший размер страницы при загрузке, и меньший размер ненужного трафика (это в случае как у меня, если пользователь к примеру зашел на пару секунд посмотреть контакты, и ему совсем неинтересно загружать 10 картинок в логотипе, которые плавно друг друга меняют).

Комментарии
Если статья вам помогла (или не помогла), оставьте комментарий с отзывом для других пользователей и автора
Добавить комментарий

Ваш адрес email не будет опубликован.

Sidebar