Привет.
Для уменьшения времени загрузки сайта использую
lazyload +
srcset. Результатом очень доволен, но есть одна проблема, lazyload могу добавить только к заглавным изображениям, а для тех которые внутри материала не могу, точнее очень много статей, в который изображения добавлены без соответствующих тегов.
Вопрос, каким образом можно находить все теги внутри материала, и добавлять в них дополнительный css-класс (это могу сделать, но это не основное), изменять
src на плейсхолдер, а оригинальный
src менять на
data-src, и добавлять
data-srcset с различными ссылками.
Всю структуру писал сам, так что контент могу предварительно разбирать с помощью php, либо добавлять всё что угодно.
Есть ли готовые jquery (и или другие) библиотеки для подобного?
Спасибо.
Структура заглавного изображения:
<img src="<?=STATIC_URL;?>/placeholder.webp" width="400px" height="229px" data-src="<?=DYNAMIC_URL;?>/<?php $thumb = pathinfo($t['image']); echo $thumb['basename'];?>/up/85/400.jpg" data-srcset="<?=DYNAMIC_URL;?>/<?php echo $thumb['basename'];?>/up/85/400.jpg 1x, <?=DYNAMIC_URL;?>/<?php echo $thumb['basename'];?>/up/85/800.jpg 2x, <?=DYNAMIC_URL;?>/<?php echo $thumb['basename'];?>/up/85/1110.jpg 3x" title="<?=$t['title'];?>" class="lazy article-image img-fluid mx-auto d-block" alt="<?=$t['title'];?>" data-toggle="tooltip" data-placement="top">
Структура самого контента:
<div class="article-text" id="<?=$game;?>">
<?php $content = $t['content']; $content_decoded = html_entity_decode($content, ENT_QUOTES); echo $content_decoded;?></div>
</div>
Простой