lazy-loading 相关问题

这就是 WordPress 中图像的输出方式：这就是 WordPress 中图像的输出方式： <figure class="no-lazy"><img loading="lazy" class="wp-image-12345" src="apple.jpg" alt="apple"></figure> 我想调整WordPress中图片的加载属性。我目前正在使用以下使用 str_replace 的解决方案： add_action( 'template_redirect', function(){ ob_start( function( $buffer ){ $buffer = str_replace( array( '<figure class="no-lazy"><img loading="lazy"', "<figure class='no-lazy'><img loading='lazy'"), '<figure class="no-lazy"><img loading="eager"', $buffer ); return $buffer; }); }); 但是，我相信有更好的方法使用 wp_img_tag_add_loading_attr 来实现我的目标。 wp_img_tag_add_loading_attr 解决方案仅在将类直接分配给图像元素 (img) 时才有效，如下所示： <img loading="lazy" class="no-lazy" src="apple.jpg" alt="apple"> 这里是 wp_img_tag_add_loading_attr 代码，它将 class="no-lazy" 的图像的加载属性从惰性更改为急切： add_filter( 'wp_img_tag_add_loading_attr', 'skip_lazy_load', 10, 3 ); function skip_lazy_load( $value, $image, $context ) { if ( strpos( $image, 'no-lazy' ) !== false ) $value = 'eager'; return $value; } WordPress 中的问题是类被添加到图形而不是图像中，如下所示： <figure class="no-lazy"><img loading="lazy" src="apple.jpg" alt="apple"></figure> 如何使用 preg_match 和 wp_img_tag_add_loading_attr 来实现与上面的 str_replace 解决方案相同的效果？ '/<figure [^£]*?my_css_class[^£]*?<\/figure>/' PS - 我对 preg_match 一点也不熟悉，并且我知道 wp_img_tag_add_loading_attr 已被弃用。解决方案如下： function add_loading_attr_to_img_in_figure($content) { // Define the pattern to match a <figure> with the specific class $pattern = '/(<figure[^>]*class="[^"]*eager-load[^"]*"[^>]*>)(.*?)(<img[^>]+>)(.*?<\/figure>)/is'; // Define the replacement to add the loading="eager" attribute to the <img> tag $replacement = '$1$2<img loading="eager"$3$4'; // Use preg_replace to modify the content $content = preg_replace($pattern, $replacement, $content); return $content; } // Add the filter for the_content to modify images in post content add_filter('the_content', 'add_loading_attr_to_img_in_figure');

php wordpress if-statement lazy-loading preg-match

回答 1 投票 0

为什么我的延迟加载在 React 中不起作用？

我正在 React 中制作单页应用程序，并且仅在需要时使用“惰性”函数和“Suspense”组件来导入组件。但我有一个奇怪的错误...

javascript reactjs lazy-loading single-page-application react-suspense

回答 1 投票 0

如何使用 Weglot 仅加载特定于语言的 .json 以防止同时加载多个动画？

我使用 Weglot 将网站翻译成 3 种语言。在页面上，我的 Hero 部分有一个 json 文件。每种语言总共有 3 种 json 文件变体，这些变体应该可见，具体取决于...

css json lazy-loading page-load-time

回答 1 投票 0

如何使用 Next.js 将远程存储中的图像提供给客户端

这是一个关于从远程对象存储提供图像的最佳实践的推测性问题。根据 Next.js 文档，应该将远程数据加载到服务器