lazy-loading 相关问题

加载 ui 不适用于动态路线

我是nextjs的新手，我正在学习nextjs的最新版本，它是带应用程序路由器的nextjs 14，我正在src/app/loading.jsx中制作loading.jsx文件，如下所示 导出默认功能

跳过在 WordPress 中添加到图形元素的图像类的延迟加载

这就是 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');

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

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

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

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

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

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

菜单上单击角度加载时间

当我单击菜单项时，加载时间太长 这是我的应用程序路由模块.ts 常量路线：路线= [ { 小路： ''， 孩子们： [ { 路径：'登录'，

在线程中获取休眠延迟加载对象

我正在使用 Hibernate 5.3、Spring 和 Java 8。 我们的应用程序是一个企业应用程序，最初是在 struts 上创建的，然后在 Spring 中进行一些新的开发。春天不太好

react中代码分割和延迟加载的区别

我不太清楚这里加载的含义 - 它是指加载到内存中还是通过网络获取并加载到内存中？

延迟加载页面组件与 ES6 导入

我正在开发一个项目，我们在APP的路由级别使用延迟加载。 从'react'导入{悬念，懒惰}； const AppRoutes = 惰性(() => import(/* webpackChunkName: "App" */ './

在 Jetpack Compose 中每出现第 5 个项目后，在多类型惰性列中显示不同的可组合项目

我有两个列表，长度为 200 的数字列表和长度为 26 的字母列表。两个列表都有不同的可组合项来显示它们，即 NumberItem() 和 AlphabetItem()。 我想要 AlphabetItem()...

如何识别 Angular 中延迟加载的块文件中的模块

任何人都可以帮助我在构建应用程序时如何对块进行角度命名吗？我有 7 个惰性模块和一些额外的共享模块，但是在构建应用程序后，我可以看到几乎 15 个以上的ch...

遇到延迟加载网络工作者代码的问题

我有4个JS文件（one.js、two.js、三.js和四.js）。 One.js 使用 importScripts 作为 webworker 代码导入two.js，two.js 导入三.js 和三.js 导入 four.js。我如何延迟加载这些...

延迟加载 Angular Material 模块和捆绑优化

我正在使用版本 17 构建 Angular 应用程序，捆绑后，大小超出了预算。使用源地图资源管理器，插图显示有多个 Angular Material 模块...

ConcurrentDictionary + Lazy——实例化只会发生一次吗？

场景 假设我们有： var 字典 = new ConcurrentDictionary>(); 实例化 Heavy 非常消耗资源。让我们考虑一下这段代码： 返回字典。

Spring FetchType.Lazy 和投影抛出错误

我试图将我所有的数据库变成延迟加载，因为它太大了（像数百万）， 为了不加载所有内容，我应用了惰性，并开始进行 Spring Projections， 然后，在项目中...

延迟加载始终加载最大的图像

我用这段代码实现了延迟加载： （函数（w，d）{ var b = d.getElementsByTagName('body')[0]; var s = d.createElement("脚本"); var v = !("</desc> <question vote="0"> <p>我已经用这段代码实现了<a href="https://verlok.github.io/vanilla-lazyload/" rel="nofollow noreferrer">延迟加载</a>：</p> <pre><code>&lt;script&gt; (function(w, d) { var b = d.getElementsByTagName(&#39;body&#39;)[0]; var s = d.createElement(&#34;script&#34;); var v = !(&#34;IntersectionObserver&#34; in w) ? &#34;8.17.0&#34; : &#34;10.20.1&#34;; s.async = true; s.src = &#34;https://cdnjs.cloudflare.com/ajax/libs/vanilla-lazyload/&#34; + v + &#34;/lazyload.min.js&#34;; w.lazyLoadOptions = { elements_selector: &#39;.lazy&#39;, threshold: 250 }; b.appendChild(s); }(window, document)); </code></pre> <p>图片：</p> <pre><code>&lt;img class=&#34;mimg lazy&#34; src=&#34;data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEHAAEALAAAAAABAAEAAAICTAEAOw==&#34; data-src=&#34;https://example.com/photos/galeries/11992/11992_3.jpg&#34; data-srcset=&#34;https://example.com/photos/galeries/11992/11992_3.jpg 650w, https://example.com/photos/galeries/11992/11992_xxl_3.jpg 1600w&#34; sizes=&#34;(max-width: 992px) 650px, (min-width: 993px) 1600px, 650px&#34; width=&#34;650&#34; height=&#34;433&#34; alt=&#34;Alt text&#34; /&gt; </code></pre> <p>问题是它总是加载最大的图像xxl。</p> <p>我不知道为什么它不加载小图像，例如在移动设备中。</p> <p>谢谢你</p> </question> <answer tick="false" vote="0"> <p>最后我可以修复它，包括</p>之间的img </answer> </body></html>

如何在Nuxt中正确延迟加载图像？

是否可以在客户端同时使用 - ssr 和延迟加载图像。这是我的情况。我的标记是用 img[src] 渲染的，在我的 chrome 浏览器中按 ctrl+U 可以看到所有图像...

Angular 独立组件（使用 LoadComponent）- 延迟加载服务不工作

服务无法在组件中运行。并且控制台上没有错误。保持组件继续加载。当我从组件中删除服务时，它开始正常工作。有一些问题...

网页加载缓慢可能是由于API请求造成的

我想快速解释一下情况。本质上，我创建了一个 Livewire 组件，它允许我从无线电 API 获取数据来获取歌曲。这些歌曲每 3 分钟更换一次，我想要

如何延迟加载Adsense广告？

延迟加载Adsense Ads有什么工作方法吗？ 我在堆栈溢出和谷歌中检查了一些答案，所有这些方法都只是延迟加载，我只需要在广告可见时加载广告...