Не только ленивая загрузка изображений в веб-страницы помогают в возрастной производительности, но также помогает в Поисковая оптимизация как замечено. Вы можете использовать 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) {если (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], function () {images.splice (i, i);}); }}; }; // Array.prototype.slice.call не вызывается в нашем прекрасном IE8 for (var i = 0; i <query.length; i ++) {images.push (query [i]); }; processScroll (); addEventListener ('прокрутка', processScroll); }(это);
<img src="blank.gif" class="lazy" data-src="/images/full-size.jpg" width="240" height="152"></a>
А вот как можно вызвать функцию jQuery для динамической реализации отложенной загрузки изображений. Вам нужно использовать ленивый класс для каждого изображения, которое вы хотите загрузить с помощью функции jQuery.
Заключение
Lazyload - хорошая вещь для вашего блога или корпоративного сайта. Это помогает с SEO, и Google это видит. Но вам не нужно об этом беспокоиться, потому что они знают, как работает отложенная загрузка.
Вы также можете настроить его по своему усмотрению, изменив анимацию и добавив задержку.
Здравствуйте,
Это хорошая информация и очень полезная информация. Ленивый Это очень полезно, так как я использовал темы для показа изображений.
Хорошая работа и вперед…!