Не тільки ліниве завантаження зображень в веб-сторінки допомагає підвищити ефективність у віці, але також допомагає в Пошукова оптимізація як спостерігалося. Ви можете використовувати jQuery і навіть Mootools для відкладеного завантаження зображень. Зображення відображатимуться лише тоді, коли ви перейдете до них.
Ця підказка jQuery зменшує кількість зовнішніх запитів під час завантаження сторінки, що в кінцевому підсумку допомагає пришвидшити завантаження блогу WordPress. Використовуючи цей трюк, ви також повинні використовувати техніку кешування для спрощення завантаження сторінки.
зміст
Що таке ледаче завантаження?
Відкладене завантаження – це коли ви завантажуєте вміст, як вам це потрібно, замість того, щоб завантажувати його відразу.
Ліниве завантаження – це метод оптимізації, який використовується в Інтернеті. Він завантажує лише той розділ веб-сторінки, який вам спочатку потрібен, і не завантажує інші частини, поки ви не клацнете на них. Таким чином, йому не потрібно завантажувати всю інформацію від початку до кінця.
Одна з форм відкладеного завантаження називається нескінченною прокруткою. Це означає, що коли ви прокручуєте сторінку вниз, більше вмісту завантажуватиметься автоматично.
Чому ліниве завантаження має значення?
Величезне навантаження на веб-сторінку сповнене зображень, сценаріїв, таблиць стилів, шрифтів і відео. Зображення беруть більше ніж на 60% розміру звичайної веб-сторінки. Позбутися від них неможливо, оскільки вони важливі для дизайну веб-сторінки.
Без оптимізації ваш веб-браузер завантажує все, перш ніж відобразити сторінку. Це уповільнює завантаження сторінки.
Має сенс робити все можливе, щоб ваші веб-сторінки завантажувалися швидше. А коли справа доходить до зображень, вони є найбільшим внеском у розмір веб-сайту.
Тож якщо ви почнете з них, це хороша ідея, оскільки тоді ваш веб-сайт буде завантажуватися швидко. Тут стає в нагоді відкладене завантаження, оскільки воно завантажує лише ті частини зображення, які в будь-який момент часу відображаються на вашій сторінці.
Як налаштувати відкладене завантаження за допомогою jQuery?
Існують плагіни, які дозволяють виконувати прості речі, але чим менше, чим менше плагінів ви використовуєте, тим ефективнішим буде ваш блог.
Неважливо, яку тему WordPress ви використовуєте, ви можете дуже легко реалізувати відкладене завантаження.
Це всього лише двоетапний посібник, один для додавання jQuery, а інший — призначити тег img класу, якщо ви хочете ліниво завантажувати конкретні зображення у свій блог WordPress.
Ось функція jQuery, яку вам потрібно буде додати до сценаріїв вашої теми.
/* lazyload.js (c) Лоренцо Джуліані * Ліцензія MIT (http://www.opensource.org/licenses/mit-license.html) */ !function(window){ var $q = function(q, res) { if (document.querySelectorAll) { res = document.querySelectorAll(q); } else { var d=document , a=d.styleSheets[0] || d.createStyleSheet(); a.addRule(q,'f:b'); for(var l=d.all,b=0,c=[],f=l.length;b= 0 && rect.left >= 0 && rect.top ) } var images = new Array() , query = $q('img.lazy') , processScroll = function(){ for (var i = 0; i < images.length; i++) { if (elementInViewport(images[i])) { loadImage(images[i], функція () { images.splice(i, i); }); } }; } ; // Array.prototype.slice.call не можна викликати в нашому чудовому IE8 for (var i = 0; i < query.length; i++) { images.push(query[i]); }; processScroll(); addEventListener('scroll',processScroll); }(це);
<img src="blank.gif" class="lazy" data-src="/images/full-size.jpg" width="240" height="152"></a>
І ось як ви можете викликати функцію jQuery для динамічного завантаження зображень. Вам потрібно використовувати клас lazy для кожного зображення, яке ви хочете завантажити за допомогою функції jQuery.
Висновок
Lazyload — це гарна річ для свого блогу чи корпоративного веб-сайту. Це допомагає з SEO, і Google може це побачити. Але вам не потрібно турбуватися про це, тому що вони знають, як працює lazyloading.
Ви також можете налаштувати його так, як хочете, змінивши анімацію та додавши затримку.
привіт,
Це хороша інформація і вона дуже корисна. Lazy Це дуже корисно, оскільки я використовував теми для показу зображень.
Вдалої роботи та вперед…!