Пост загрузка картинок на сайте средствами 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 картинок в логотипе, которые плавно друг друга меняют).