lazy load \ validator \ wordpress

123 4
L
На сайте с 01.02.2011
Offline
133
#11
Gerga:
Linblack, удалить?

function theme_filter_the_content($content) {
return str_replace('srcset=""', '', $content);
}

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


или добавить placeholder


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, но он приписывает вообще какие то свои теги, которые по умолчанию - чем-то ошибочным считает в валидаторе.

S
На сайте с 30.09.2016
Offline
469
#12
Linblack:
сам srcset - зачем то выводиться дополнительно в пустом виде.
что за бред - я не знаю

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

Отпилю лишнее, прикручу нужное, выправлю кривое. Вытравлю вредителей.
L
На сайте с 01.02.2011
Offline
133
#13

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

D.iK.iJ
На сайте с 26.05.2013
Offline
184
#14
Linblack:
тогда может знает кто еще какие надежные плагины на wp по этой теме, кроме rocket и обсуждаемого?

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

Адаптивный дизайн в 2 строчки ( https://dikij.com/wm/adaptaciya-saytov.php ). + Принимаю заказы любой сложности ( https://searchengines.guru/ru/forum/926323 ). 💎 Еще я делаю классные кулоны с опалами ( https://mosaicopal.ru/ ).
hoolz
На сайте с 04.07.2012
Offline
80
#15
Linblack:
тогда может знает кто еще какие надежные плагины на wp по этой теме, кроме rocket и обсуждаемого?

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

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

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

<img class="responsively-lazy"  src="images/2500.jpg" srcset="data:image/gif;base64,R0lGODlhAQABAIAAAP///////yH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" />
LEOnidUKG
На сайте с 25.11.2006
Offline
1588
#16
Код получается примерной такой, в src основная картинка остаётся.

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

✅ Трастовых площадок под размещение статей и ссылок. Опыт 12 лет! ( https://searchengines.guru/ru/forum/675690 ) ⭐ Купить вечные трастовые ссылки для сайта ( https://getmanylinks.ru/?srh ) ⭐ Ускорение ваших сайтов (WP, Opencart и др.) + Настройка сервера ( https://searchengines.guru/ru/forum/997205 )
SeVlad
На сайте с 03.11.2008
Online
1457
#17
hoolz:
Код получается примерной такой, в src основная картинка остаётся. Для меня это было важным критерием, ибо мало ли не все краулеры data-src поймут.

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

Делаю хорошие сайты хорошим людям. Предпочтение коммерческим направлениям. Топики помощи с ⓌordPress (https://searchengines.guru/ru/forum/1032910 ) и основы безопасности сайтов ( https://searchengines.guru/ru/forum/774117 ). *** Помощь\консультации в топиках форума - БЕСПЛАТНО. Платные услуги ( https://wp.me/P3YHjQ-3 ) - с бюджетом от 150$ ***
hoolz
На сайте с 04.07.2012
Offline
80
#18
LEOnidUKG:
Эм... так браузер значит её загрузит и никакого Lazyload. Соль то в том, чтобы браузеру не давать её загрузить.

Не загрузит.

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

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

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

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

SeVlad
На сайте с 03.11.2008
Online
1457
#19
hoolz:
Грузящейся ереси?)

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

S
На сайте с 30.09.2016
Offline
469
#20
SeVlad:
Грузящейся ереси.

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

123 4

Авторизуйтесь или зарегистрируйтесь, чтобы оставить комментарий