lazy load \ validator \ wordpress

function theme_filter_the_content($content) {

    return str_replace('srcset=""', '', $content);    

}



add_filter('the_content', 'theme_filter_the_content', 999);

function theme_filter_the_content($content) {

    $placeholder = "data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%200%200'%3E%3C/svg%3E";

    

    return str_replace('srcset=""', 'srcset="' . $placeholder . '"', $content);    

}



add_filter('the_content', 'theme_filter_the_content', 999);

да, как оратор сообщение выше говорил - эта строка за ленивую загрузку отвечает.

вот только все равно не могу понять в чем проблема, srcset - это перечисление картинок и их размеров. тут все ок и трогать не надо (казалось бы).

но похоже я нашел реальную ошибку. проблема в разной архитектуре этой товарной картинко-ячейки.

например:

так выглядит эта беда на странице магазина:

<img width="300" height="338" 

src="https://site.ru/wp-content/uploads/2019/08/1121004B-copy-300x338.jpg" 

class="attachment-woocommerce_thumbnail size-woocommerce_thumbnail" 

alt="" 

srcset="https://site.ru/wp-content/uploads/2019/08/1121004B-copy-300x338.jpg 300w, https://site.ru/wp-content/uploads/2019/08/1121004B-copy-267x300.jpg 267w, https://site.ru/wp-content/uploads/2019/08/1121004B-copy-768x865.jpg 768w, https://site.ru/wp-content/uploads/2019/08/1121004B-copy-910x1024.jpg 910w, https://site.ru/wp-content/uploads/2019/08/1121004B-copy-600x675.jpg 600w, https://site.ru/wp-content/uploads/2019/08/1121004B-copy.jpg 1066w" 

sizes="(max-width: 300px) 100vw, 300px" />

а если мы выводим через шорткод, то так:

<img width="300" height="300" 

src="//site.ru/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" 

data-lazy-type="image" 

data-src="https://site.ru/wp-content/uploads/2019/08/61011104B-copy-300x300.jpg" 

class="lazy lazy-hidden attachment-woocommerce_thumbnail size-woocommerce_thumbnail" 

alt="" 

srcset="" 

data-srcset="https://site.ru/wp-content/uploads/2019/08/61011104B-copy-300x300.jpg 300w, https://site.ru/wp-content/uploads/2019/08/61011104B-copy-150x150.jpg 150w, https://site.ru/wp-content/uploads/2019/08/61011104B-copy-768x768.jpg 768w, https://site.ru/wp-content/uploads/2019/08/61011104B-copy-1024x1024.jpg 1024w, https://site.ru/wp-content/uploads/2019/08/61011104B-copy-600x600.jpg 600w, https://site.ru/wp-content/uploads/2019/08/61011104B-copy-100x100.jpg 100w, https://site.ru/wp-content/uploads/2019/08/61011104B-copy.jpg 1200w" 

sizes="(max-width: 300px) 100vw, 300px" />

т.е. во втором случае, тег data-srcset - каким то лешим содержит lazy load, а сам srcset - зачем то выводиться дополнительно в пустом виде.

что за бред - я не знаю. зачем в шорткодах выводить другими методами все это..?

оставил бы wp-rocket, но он приписывает вообще какие то свои теги, которые по умолчанию - чем-то ошибочным считает в валидаторе.

Разработчик плагина решил делать ленивую загрузку так.

тогда может знает кто еще какие надежные плагины на wp по этой теме, кроме rocket и обсуждаемого?

Сделать руками самоcтоятельно / отдать программисту?

Я использую responsively-lazy

Не для WP, но всё же может пригодится.

Код получается примерной такой, в src основная картинка остаётся. Для меня это было важным критерием, ибо мало ли не все краулеры data-src поймут.

<img class="responsively-lazy"  src="images/2500.jpg" srcset="data:image/gif;base64,R0lGODlhAQABAIAAAP///////yH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" />

Эм... так браузер значит её загрузит и никакого Lazyload. Соль то в том, чтобы браузеру не давать её загрузить.

Если узнать, про назначение srcset и что в нём нужно задавать условия, то никакой такой грузящейся ереси писать не придётся.

Не загрузит.

Попробуйте демку поклацать

---------- Добавлено 22.10.2019 в 03:59 ----------

Грузящейся ереси?)

Грузящейся ереси.

Там скрипт подгружает нужные картинки. При загрузке страницы картинка, которая в src, не грузится, если браузер понимает srcset. А в srcset указана картинка 1px, она и показывается. У изображений есть ещё атрибут data-srcset, где и содержатся наборы с условиями (hoolz его не показал). Оттуда скрипт берёт данные и заменяет на них содержимое атрибута srcset.