Статьи

wp_img_tag_add_decoding_attr() │ WP 6.1.0

Click here to view original web page at wp-kama.ru

Добавляет атрибут decoding="async" ко всем картинкам (тегу <img>) в переданном тексте.

Атрибут decoding позволяет указать, как браузер должен декодировать изображение:

  • async - вне основного потока.
  • sync - в основном потоке.
  • auto - по логике самого браузера.

В версии 6.1 WordPress добавляет decoding="async" ко всем изображениям. Текущая функция вызывается в функции wp_filter_content_tags(), которая форсировано висит на хуках:

add_filter( 'the_content', 'wp_filter_content_tags' );
add_filter( 'the_excerpt', 'wp_filter_content_tags' );
add_filter( 'widget_text_content', 'wp_filter_content_tags' );
add_filter( 'widget_block_content', 'wp_filter_content_tags' );

decoding и lazy load - это разные вещи. decoding связан с тем, как браузер декодирует данные картинки, а не когда он их загружает. Т.е. картинка сначала загружается (в кодированом виде), потом декодируется, и только отображается. По умолчанию декодирование происходит в основном потоке, а это может мешать другим процессам происходящем на странице.

Полезные ссылки по теме:

Возвращает

Строку. Текст в котором к img добавлен атрибут decoding.

Использование

wp_img_tag_add_decoding_attr( $image, $context );
$image(строка) (обязательный)
Текст в котором есть <img> теги, к которым нужно добавить decoding атрибут.
$context(строка) (обязательный)
Контекст из которого срабатывает фукнцию, передается в хук-фильтр.

Примеры

$html = <<<HTML
<p>Some text</p>
<img width="442" height="129" class="foo" src="/image-759980.png" alt="">
<p>Some text</p>
HTML;

$html = wp_img_tag_add_decoding_attr( $html, 'custom' );

echo $html;

/*
<p>Some text</p>
<img decoding="async" width="442" height="129" class="foo" src="/image-759980.png" alt="">
<p>Some text</p>
*/