延迟加载是计算机编程中常用的设计模式，用于将对象的初始化推迟到需要它的点。
我们的项目使用 astrotomic/laravel-translatable 库在 Laravel 9 中进行翻译。问题是加载翻译的第二级关系（例如 hasMany）不会懒惰地执行...
我有 2 个下拉菜单 - 名称和标签。 目前，数据存储在缓存（dcc.Store）中，我根据下拉值进行回调，并返回一个容器，其中过滤后的 df 为 df_co...
我想延迟加载我的组件，以减少我的初始包大小，并使用反应路由器使用代码分割来动态获取组件。 然而，当使用 React Suspense 时，它们会强制你使用
在此存储库中：https://github.com/tlg-265/react-app-vanilla $ git 克隆 https://github.com/tlg-265/react-app-vanilla $ cd 反应应用程序香草 $ 纱线 $ 纱线开始 我有一个只有 3 页的虚拟应用程序：{
我有这个代码（减少了重现的最小值）： 我有这个代码（减少了重现的最低限度）： <div style="overflow:hidden;height:160px;width:160px;border:4px solid red;position:relative;"> <img src="https://josefkorda.cz/img/sluzby-koncerty.jpg" loading="lazy" style="height:100%;position:absolute;top:0;left:-1px;"> </div> 图像（红色边框）是通过 loading="lazy" 本机延迟加载的。 问题是，直到我更改 css 中的一些 DevTools 或删除代码中的 loading="lazy" 属性后，图像才会加载。 它开始工作，如果： left:0 用于图像或 overflow:hidden 已删除或 loading="lazy"已删除 这里是实时示例的链接（更新：通过为图像提供尺寸，问题在示例中不再可见） 这是示例图像，其中第一个带有图像的圆圈是它应该的样子，以及没有 loading="lazy" 时它的工作原理。接下来的圆圈（图像）是有问题的圆圈，其 loading="lazy" 标签中带有 img 属性。 我最近也遇到了这个问题，当你添加 CSS 样式“宽高比”时，它似乎可以自行解决 万一有人遇到这个问题，主要原因是我的用例溢出：剪辑；父溢出被隐藏（我不知道为什么）。解决了问题。
在我的项目中我想使用CKEditor5。问题是，这个版本与 IE11 不兼容，所以我的目标是延迟加载 CKEditor5 组件，当检测到 IE11 时，我不想简单地加载这些
我想使用视频作为我网站的背景。我有这个： 我想使用视频作为我网站的背景。我有这个： <video autoplay muted loop preload="none" poster="{{ asset('img/web/intro_video_placeholder.webp') }}" loading="lazy"> <source src="{{ asset('img/web/video/intro_video.webm') }}" type="video/webm"> </video> 它工作得很好，但我想要实现的是延迟加载。我想先加载 css 和 js，然后开始加载视频，而且，如果加载了视频，我想自动播放它。 上面的代码无法正常工作，并且它会在慢速互联网连接上阻止我的 css 和 js（视频大约有 9MB）。 有什么解决办法吗？非常感谢。 你的代码看起来不错。但有一个小小的改变。如果存在 preload，则忽略 autoplay 属性。 document.addEventListener("DOMContentLoaded", function() { var lazyVideo = document.getElementById('lazyVideo'); // Function to play the video }); <video id="lazyVideo" muted loop preload="none" poster="{{ asset('img/web/intro_video_placeholder.webp') }}" loading="lazy"> <source src="{{ asset('img/web/video/intro_video.webm') }}" type="video/webm"> </video>
我可以使用另一个惰性组件作为<Suspense />后备吗？
我有一个sdk，需要延迟加载组件及其骨架。所以我实现了如下代码： const lazySkeleton = React.lazy(() => import('@my-sdk/skeleton')); const lazyComponent = React.la...
在 Hibernate 会话期间，我正在加载一些对象，其中一些对象由于延迟加载而作为代理加载。一切都好，我不想关闭延迟加载。 但稍后我需要发送...
PrimeNG p-table 延迟加载在没有额外“点击”的情况下不会更新
我在一个延迟加载的项目中使用primeNG的p表。 但我在加载表格时遇到了一个问题，没有额外的“点击”。 在我的模板中，我有： 我在一个延迟加载的项目中使用 primeNG 的 p-table。 但我在加载表格时遇到了问题，没有额外的“点击”。 在我的模板中，我有： <p-table [value]="products" [totalRecords]="totalRecords" [tableStyle]="{ 'min-width': '50rem' }" [paginator]="true" [rows]="10" [showCurrentPageReport]="true" [rowsPerPageOptions]="[5,10,20]" [lazy]="true" (onLazyLoad)="loadProducts($event)" > 在我的组件中我有： products: ProductDTO[] = []; totalRecords : number = 5 ... loadProducts(event : TableLazyLoadEvent){ console.log(event); this.projectsOverviewService.getProducts() .subscribe((response:PagedListDtoOfProductDTO)=> { this.products = response.items; this.totalRecords = response.totalRecords; console.log("loaded products"); }); } 我已验证正在设置产品和总记录。 但我的表没有更新。仅当我单击分页器的下拉菜单时，才会呈现产品。 我也尝试将它与 OnInit 结合起来，但这也不会加载它。 仅当我仅使用 OnInit 方法并删除lazy="true" 和 onLazyLoad 时，我的表才能正确呈现。 我还尝试在其周围的额外容器中使用 observable 并将 *ngIf 与异步管道一起使用，但不起作用，因为 OnInit 方法（填充初始产品 observable 所必需的）不能与 OnLazyLoad 一起使用方法（它不断触发 TableLazyLoadEvents） 我已经找到问题了，根据给定的信息你是不可能知道的。 在我的 component.ts 中我已经配置了 @Component({ ... changeDetection: ChangeDetectionStrategy.OnPush }) 将其更改为 @Component({ ... changeDetection: ChangeDetectionStrategy.Default }) 解决了我的问题
我想尝试基于本机浏览器的延迟加载，而不是我当前使用的基于 JS 的方法，因为这些天加载=“lazy”属性得到了很好的支持：caniuse加载
PagespeedInsights 即使在延迟加载图像时也会显示延迟屏幕外图像？
PageSpeedInsights 显示延迟屏幕外图像，即使下面的图像是延迟加载的 PageSpeedInsights 显示延迟屏幕外图像，即使下面的图像是延迟加载的 <img data-src="https://www.healinghandsclinic.co.in/images/successfull-stories/australian-Patient.jpg" alt="" title="" class="img-responsive lazyloaded" src="https://www.healinghandsclinic.co.in/images/successfull-stories/australian-Patient.jpg"> 有人可以解释一下上面的代码是什么意思，特别是这部分吗： class="img-responsive lazyloaded" 如何推迟此图像？ 推迟这张图片 <img data-src="https://www.healinghandsclinic.co.in/images/successfull-stories/australian-Patient.jpg" alt="" title="" class="img-responsive lazyloaded" src="https://www.healinghandsclinic.co.in/images/successfull-stories/australian-Patient.jpg"> 如果此代码片段直接来自服务器端渲染的 HTML，则 src 属性值和 data-src 属性是相同的。 这意味着浏览器将立即开始获取 src 资源： https://www.healinghandsclinic.co.in/images/successfull-stories/australian-Patient.jpg 如果该图像在视口内不可见（如 Lighthouse 使用的），它最终仍将与其他（图像和非图像）资源竞争带宽。 因此 PageSpeed Insights (PSI)/Lighthouse 建议推迟屏幕外图像。 但是，考虑到图像元素上使用的 CSS 类 (class="img-responsive lazyloaded")，您共享的代码片段实际上可能是某些延迟加载 JS 库加载图像后的最终结果。 与上面相同的理论仍然适用：初始后备图像（可能只是图像的低质量版本或 1x1 占位符）可能最终被下载，这是 PSI 发现的。 如果没有其他信息，很难说哪张图片最初是由 PSI 发现的。 解决方案 无论您的情况如何，这里都有一个两步最佳实践和解决方案： 删除你的 JS 延迟加载库； 然后使用本机延迟加载（这仅意味着向您的 loading="lazy" 添加 <img> 属性）； 将 CSS bg 图像（如果有的话）更改为 <img> 可能会很方便，因为这会给你更多的加载选项/控制 由于使用本机延迟加载允许您删除 JavaScript，因此它将提高您的 JS 性能以及 TBT（实验室数据/Lighthouse 指标）和 INP（现场数据/Core Web Vitals 的一部分）！ 资源 这是一篇关于 JS 库的旧 Google 文章： https://web.dev/articles/lazy-loading-images 但是使用本机延迟加载，我们不再需要 JS（关于此主题的新 Google 文章）： https://web.dev/articles/browser-level-image-lazy-loading#why_browser-level_lazy_loading 所有主要浏览器中的代码示例和支持（对于 <img> 和 <iframe>）： https://www.linkedin.com/feed/update/urn:li:activity:7129755923555737601/ 何时/什么要延迟加载： https://www.erwinhofman.com/blog/to-lazyload-above-the-fold-images/
我正在编写一个应用程序，其中包含具有以下导航属性的模型类 测试报告 => 学生 => 课程表 => 测试 该关系是一对多的
为什么React Vite项目添加延迟加载会导致根节点为空？
我正在使用React（Typescript）和Vite开发一个应用程序。为了减少包的大小，我想使用 React 的惰性函数来实现代码分割。我不想引入第三方库......
最初，我在每个组件中实现了一个模块，并在我的应用程序中实现了基于模块的延迟加载。当时我的 main.js 包大小为 2mb。现在我转换为所有独立组件并且
如果窗口在 Chrome 中放大/缩小，则滚动事件上的代码不会执行
我使用下面的脚本在滚动到达页面底部时加载数据。除了 Chrome 之外，它可以在所有浏览器上正常工作。在 Chrome 中，当我使用键盘手动放大/缩小窗口时
随着 Angular 17 中独立组件的使用，我们可以直接延迟加载组件，而不是使用模块。但问题是在这种情况下如何预加载？早些时候，当延迟加载模块时，我们
我有名为 IconRenderer 的 React 组件，并且传递了 2 个名为 iconName 和 iconPath 的 props。 IconRenderer 的作用是通过获取 iconPath 和 ico 使用延迟加载导入 React-icon 模块...
我正在尝试从新闻源页面中抓取和重新调整新闻图像和标题的用途，以便我可以在标牌显示（Xibo）中重复使用它们。基本上我只想要
我使用 Unveil.js 来延迟加载图像。为了节省时间/空间，我使用 Base64 占位符图像： 我使用 Unveil.js 来延迟加载图像。为了节省时间/空间，我使用 Base64 占位符图像： <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-src="https://unsplash.it/1000/500?image=631" width="1000" height="500" data-unveil="true" /> 我遇到的问题是如何调整占位符图像的大小。它似乎始终保持 1 的纵横比，这对于响应式网站来说是一个问题。 因此，如果上面的图像标签位于宽度为 50% 的 <div> 内部，并且 <div> 的计算宽度为 500px（总视口宽度为 1000px），那么图像将溢出 <div>，除非我使用max-width: 100%; height: auto; 然后非数据 URI 图像将正确缩放并保持其纵横比。 但是，无论 <img> 标签或 CSS 规则中的宽度/高度属性如何，数据 URI 图像始终保持正方形。这会导致在速度较慢的服务器上出现一些跳跃，因为 Unveil.js 延迟加载的图像并不总是方形的。 我设置了一个快速小提琴来演示大小差异（没有 Unveil.js）：http://jsfiddle.net/silb3r/7bnfqkko/1/ 还有一个带有 Unveil.js 的：http://jsfiddle.net/silb3r/2eff5thm/（您可能需要手动限制连接才能看到问题） 有人熟悉确保数据 URI 保持原始图像宽高比的方法吗？最好不要添加更多 jQuery，但我对任何事情都持开放态度。 感谢您的任何建议。 好吧，你的 CSS 会覆盖通过 HTML 属性设置的宽度和高度，因此固有图像尺寸开始发挥作用，而那些 是 1×1 像素。因此，无论怎样，设置 height:auto 自然会产生方形图像。 如果您事先知道图像的长宽比（并且您似乎知道，假设您使用的宽度和高度 HTML 属性值不是完全任意的 - 否则，几行服务器端代码可以从图像文件中读取它们，如果需要更加动态），那么您可以使用所谓的“padding-top hack”来创建一个使用正确宽高比的占位符。