logo

Выберите город
Max-Webs – компания федерального уровня, в которой работают высококлассные специалисты.

Подключаем Lazy Load к WordPress без плагина

24 июня 2016 в 5:18 Javascript (JS),Jquery,Wordpress,Блог веб-разработчика
Звёзд: 1Звёзд: 2Звёзд: 3Звёзд: 4Звёзд: 5
Загрузка...
НЕТ ВРЕМЕНИ ЧИТАТЬ СТАТЬЮ?
Но вам требуется помощь в настройке Подключаем Lazy Load к WordPress без плагина ? Получите индивидуальную мини-консультацию по Скайпу или WhatsApp.

Цена: 500 руб.Оформить заказ и оплатить

Если вы собираетесь делать все самостоятельно — продолжайте чтение!

ee36037bbffac213840f0999c8267562

1) Подключаем библиотек Jquery
2) Подключаем скрипт LazyLoad от https://www.appelsiini.net/projects/lazyload, например.
3) Добавляем код в файл function.php вашего шаблона.

[php]
/**
* Takes a string and modifies any <img> tags within it by:
* — Adding the class ‘lazy’
* — Removing the ‘src’ attribute
* — Adding the ‘data-original’ attribute using the original ‘src’ value
*
* @param $content
* @return string
*/
function themename_lazyload_modify_img_tags( $content ) {
$content = mb_convert_encoding($content, ‘HTML-ENTITIES’, "UTF-8");

// Get out if we don’t have any content
if ( empty($content) )
return $content;

$document = new DOMDocument();
libxml_use_internal_errors(true);
$document->loadHTML(utf8_decode($content));

// Grab all image tags
$imgs = $document->getElementsByTagName(‘img’);

// Loop through all image tags
foreach ($imgs as $img) {

$existing_class = $img->getAttribute(‘class’); // Store existing class (if the image has one applied)
$src = $img->getAttribute(‘src’); // Store src attribute value

// Add ‘lazy’ class and the existing class(es) to the image
$img->setAttribute(‘class’, "lazy $existing_class");

// Add a ‘data-original’ attribute with our ‘src’ attribute value
$img->setAttribute(‘data-original’, $src);

// Remove our src attribute
$img->removeAttribute(‘src’);

}

$html = $document->saveHTML();
return $html;
}

add_filter( ‘the_content’, ‘themename_enable_lazy_loading_the_content’ );
/**
* Modifies the content to enable lazy loading for all <img> tags
*
* @uses themename_lazyload_modify_img_tags()
* @param $content
* @return string
*/
function themename_enable_lazy_loading_the_content( $content ) {
return themename_lazyload_modify_img_tags($content);
}
[/php]

4. Добавляем JS

[php]
$("img.lazy").lazyload({
threshold : 1500
});
[/php]

Если используем Infiniti Scroll, то добавляем

[php]
$("img.lazy").lazyload({
threshold : 1500
}).removeClass("lazy");
$(document).ajaxStop(function(){
$("img.lazy").lazyload({
threshold : 1500
}).removeClass("lazy");
});
[/php]

Альтернатива

[php]
add_filter ( ‘wp_get_attachment_image_attributes’ , ‘wpse8170_add_lazyload_to_attachment_image’ , 10 , 2 );
function wpse8170_add_lazyload_to_attachment_image ( $attr , $attachment ) {
$attr [ ‘data-original’ ] = $attr [ ‘src’ ];
$attr [ ‘src’ ] = ‘grey.gif’ ;
return $attr ;
}
[/php]

Похожие статьи

Оставить заявку
Консультация наших специалистов совершенно бесплатна и ни к чему вас не обязывает. Наш маркетолог проанализирует ваши ответы и свяжется с Вами в ближайшее время.

Какие услуги вас интересуют? *

Прикрепить к ответу коммерческое предложение? *

В каком регионе планируете работать ? *

Сколько заявок в месяц вам необходимо получать? *

Средний чек за продажу товара/услуги ? *

Вкратце опишите свою деятельность и причину обращения: *

Представьтесь, пожалуйста: *

Как с вами связаться? *

Контактный номер телефона: *

Введите контактный E-mail: *

Бюджет на реализацию *



Запрос демо версии
Дорогой клиент, демо версию мы можем бесплатно реализовать для вас в течении 1-2 дней. Уточните детали вашего бизнеса.

Пришлите 1-5 ссылок на сайты вашей тематики которые вам нравятся. Так же можете приложить ссылки на фото(скрншоты)

Представьтесь, пожалуйста: *

Как с вами связаться? *

Контактный номер телефона: *

Введите контактный E-mail: *

Добавить комментарий, если необходимо



[contact-form-7 404 "Not Found"]
[contact-form-7 404 "Not Found"]
[contact-form-7 404 "Not Found"]
[contact-form-7 404 "Not Found"]
[contact-form-7 404 "Not Found"]
Оставить заявку
Консультация наших специалистов совершенно бесплатна и ни к чему вас не обязывает. Наш маркетолог проанализирует ваши ответы и свяжется с Вами в ближайшее время.

Какие услуги вас интересуют? *

Прикрепить к ответу коммерческое предложение? *

В каком регионе планируете работать ? *

Сколько заявок в месяц вам необходимо получать? *

Средний чек за продажу товара/услуги ? *

Вкратце опишите свою деятельность и причину обращения: *

Представьтесь, пожалуйста: *

Как с вами связаться? *

Контактный номер телефона: *

Введите контактный E-mail: *

Бюджет на реализацию *



[contact-form-7 404 "Not Found"]
[contact-form-7 404 "Not Found"]
[contact-form-7 404 "Not Found"]
[contact-form-7 404 "Not Found"]
[contact-form-7 404 "Not Found"]
Запись на бесплатный урок
Введите ваше имя, телефон и e-mail.
Я свяжусь с Вами для уточнения времени прохождения урока.

Как вас зовут *

Как с вами связаться? *

Введите контактный телефон *

Введите контактный E-mail *



[contact-form-7 404 "Not Found"]
Заказать сайт
Первые 14 дней бесплатно. Оставьте номер email и контактный телефон. Я лично перезвоню Вам в течение 10 минут, для обсуждения деталей.


Ваш email

Введите контактный телефон

Комментарий или вопрос

Проблемы с оплатой?
Опишите ситуацию. Когда возникает проблема? Что планируете купить?

Введите ваше имя *

Введите контактный email *

Что необходимо доработать

Скачать чек-лист
Заполните поля ниже. В течение 10 минут на указанный e-mail будет отправлена ссылка на скачивание чек-листа.

Введите ваше имя *

Введите контактный E-mail *

[contact-form-7 404 "Not Found"]
Заказать обратный звонок
Я свяжусь с Вами в течение 10 минут и отвечу на все Ваши вопросы.

Введите ваше имя *

Как с вами связаться? *

Введите контактный телефон *



Степень загрузки
В данном разделе представлена моя занятость в данный момент. Данные обновляются каждый день. Вся работа выполняется по предварительной записи и 20% предоплатой от стоимости проекта.
низкая загрузка. выполняется ~5 заказов. старт работ через 5 дней.
средняя загрузка. выполняется ~15 заказов. старт работ через 20 дней.
высокая загрузка. заказы временно не принимаются.
Задать вопрос
У вас есть вопросы адресованный интернет-маркетологу? А у меня ответы, добро пожаловать! И да, это бесплатно. Я отвечу вам в течение 24 в разделе вопрос-ответ.
[contact-form-7 404 "Not Found"]