问题标签 [deferred-loading]

我制作了一个看起来可以接受的网站，并且在合理的加载时间和不过度压缩 JPEG 图像之间取得了平衡。一个问题是，有一个 100% 拉伸的全屏背景，虽然在 13 英寸显示器上看起来不错，但在 5K 视网膜显示器上可能会显得丑陋。不过，我不能证明为移动用户提供巨大的图像而让他们受苦。我正在寻找的是一个“延迟加载程序”或“延迟加载程序”，它将检测显示尺寸和像素密度（视网膜与非视网膜）并提供可能的最高质量图像 - 但只有在所有网站内容都已经使用适度压缩的图像加载并处于可浏览状态。如果可能的话，我希望高分辨率换入图像在它们覆盖并替换默认分辨率图像时进行淡入过渡。

目标/步骤

1. 使用适度压缩的图像快速加载基本页面。该页面现在可以进行交互并且看起来并不可怕。当搜索引擎蜘蛛页面时，在这个阶段应该被认为是完全加载的，否则页面排名可能会受到影响。
2. 检查设备显示尺寸和像素密度以了解要换入的分辨率图像。
3. 以适当的分辨率提供图像，但在它们完全加载并准备好淡入之前将它们隐藏起来。
4. 淡入高分辨率图像。（淡入不需要跨图像同步，每个图像都可以在准备好时淡入其低分辨率对应部分）

我在祈求奇迹吗？我应该放弃并坚持使用平庸的压缩图像吗？我不可能是唯一一个想要这样做的人，所以我试图找出可用的技术。

我在网上找到了一些零碎的答案，但我在任何地方都没有看到将它们联系在一起的解决方案。似乎没有处理此问题的“最佳实践”，这令人惊讶。如果您在视网膜设备上查看他们的网站，我知道 apple.com 会提供视网膜图像，但我不知道他们是如何做到的（例如：存储照片）。我找到了一个延迟加载视网膜图像的脚本（在jsfiddle上，所以我不会用代码链接和混乱这篇文章），但它是由滚动触发的，我不知道如何重新编写代码以加载它们之后而是页面内容。这是另一个惰性加载器使用 jQuery 虽然我无法让它为我工作，而且我不知道如何让它在页面内容之后加载，也不知道如何让图像淡入现有的低-res 的，我也不知道如何结合视网膜显示检测。

没有太多 javascript 知识的人是否有希望使用一些现有的代码来实现这一点，或者我应该继续在 Lowres Land 的微薄存在吗？

编辑：我认为比“延迟加载”更相关的术语可能是“延迟加载”。我发现延迟加载通常是指向下滚动页面时呈现的内容。我已经完善了我的搜索。将在这里发布任何发现。我目前正在阅读这篇文章，但还没有完全消化。

Edit2：我认为 jQuery 的 deferred 和 fadeIn 一起（与视网膜的媒体查询）可能是答案。我在 jQuery 文档中找到了一个看起来像我想要的变体的示例。但就将这一切联系在一起而言，我的想法太过分了。

我希望我的所有存储库都列在一个服务提供商中，但我不希望它们一次全部加载...

考虑以下服务提供商：

根据 Laravel 文档，我可以将绑定的注册推迟到需要时。但是，当我在单个服务提供者中添加多个绑定时，这是否有效？具体来说，我的意思是，它会延迟然后加载全部还是只加载需要的那个？

我有一些需要异步运行的外部 JS 代码。我调用它的方式是我在异步函数中创建一个脚本，然后我将其附加到页面上的其余脚本，如下所示..

现在假设有另一个脚本（first.js）也需要异步运行，但它需要在这个脚本（second.js）之前运行，我如何将它们链接在一起以确保在 second.js 运行时已经加载了 first.js ?

不确定我是否应该使用jQuery getScript或者是否有更简单的方法？

一些基于我提供的代码示例将不胜感激。

我试图找出一种方法来强制页面加载页面上的所有元素，而无需任何延迟加载。这是有问题的页面：

http://v3.torontomls.net/Live/Pages/Public/Link.aspx?Key=145177a42bc64537b568ad2e71c157da&App=TREB

如您所见，页面顶部的表格中总共列出了 31 条记录，但是当我查看页面的源代码时，我可以看到有 25 条记录具有类data-deferred-loaded和 6 条记录上课data-deferred-load。

这是我正在谈论的照片：

我试图从这个页面上抓取信息，但在我这样做之前，我需要确保所有 31 条记录都已加载。我怎样才能强制他们全部加载？

我听说延迟 JavaScript 以增加页面加载时间并优先加载必要的 JavaScript，这对于页面在页面加载时正常运行和延迟可以在页面加载后执行的 JavaScript 至关重要（本文建议使用事件处理程序之类的东西：https： //varvy.com/pagespeed/defer-loading-javascript.html?utm_source=dlvr.it&utm_medium=tumblr )

让我感到疑惑的是，尽管许多人使用可以在几毫秒内加载延迟 JavaScript（可能是 50-200kb 文件）的快速互联网连接，但较慢的连接可能需要几秒钟才能加载，因此功能不会立即可用。你对改进这个有什么建议或者我弄错了目的。

如何改善慢速连接的 JavaScript 加载时间，尤其是使用多个库（可在单个页面上使用的 jQuery、Bootstrap 等）？

defer从带有Firefox 属性的 CDN 加载时，我遇到了一个非常零星的 jQuery 问题：

大多数时候，至少在我的开发服务器上，这工作得很好。但是，当我加载页面时，可能有五分之一的错误来自 Bootstrap、FuelUX 和几乎所有其他插件，指出未定义 jQuery：

我很惊讶，因为即使在这种情况下，如果我查看 Firefox 控制台中的时间戳，似乎脚本正在以正确的顺序加载。

这里发生了什么？这是deferFirefox 或 CDN 的问题，还是我做错了什么？

我想要做的是在数据表的第一列中创建一个序列号，如果我没有使用延迟加载，那么上面的代码就可以工作了。BY 使用此代码数据即将到来，但数据表无法正常工作。我在后端使用 Laravel。如果您需要我可以提供的任何其他信息来解决问题，请发表评论。

Javascript 错误：未捕获的类型错误：无法读取未定义的属性“fnSettings”我不知道该怎么做。

如何在此脚本中包含多个 JS 文件，此 S

我是 web 开发的新手，我很难让我的 web 快速加载。

所以我找到了这篇文章并实现了它。在可视化我的页面时，我发现图像根本没有呈现。我得到以下图像：

图片html

脚本

调试信息

另外，我用 chrome 调试它，它似乎可以正确地用假图像切换真实图像。然而，网络没有加载正确的。

我错过了什么？

谢谢你的帮助

我正在尝试使用 OmniFaces 来推迟 PrimeFaces 脚本，如本答案所示。

但是 PrimeFaces 在 head 中渲染了一个内联脚本，就像这样（脚本美化并由我评论）：

当我运行应用程序时，我得到一些 JS 错误（文件和错误）：

如果我把一些变量放进去primefaces.deferred.js，像这样：

前两个错误仍然发生，但第三个错误消失了。

显然，PrimeFaces JS 对象缺少以下属性：

所以，问题是：如何正确地推迟这些 PrimeFaces 脚本属性？

PS：版本：PrimeFaces 5.3、OmniFaces 2.3、Payara Server (Glassfish) 4.1.1.161