1

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

目标/步骤

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

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

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

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

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

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

4

2 回答 2

2

首先，您应该真正研究一下lazySizes。这是一个惰性加载器，它构建在 HTML5 响应式图像标准（以及所有 polyfills）之上，还支持将低质量图像交换为更高质量的图像。（这称为低质量图像占位符模式或短 LQIP）。

这是静态宽度图像的示例：

<img src="low-quality.jpg" data-srcset="normal.jpg 1x, retina.jpg 2x" class="lazyload" />

这是自适应宽度图像的一种：

<img src="low-quality.jpg" data-srcset="low-quality.jpg 300w, image-1 480w, image-2.jpg 600w, image-3.jpg 980w" data-sizes="auto" class="lazyload" />

关于您想要做什么的某些部分不清楚或不太好。

  1. 您的 LQIP 计划： 如果您有很多图像（例如，一个页面上超过 6 个图像）。我不会对所有图像都使用 LQIP，而只对关键的图像使用 LQIP，或者不使用，因为如果添加很多图像，它们仍然需要下载，浏览器一次只能处理 6 个请求。这意味着如果您收集包含大量小图像的页面，您将不会获得太多性能。在这种情况下，最好根本不下载图像，而只加载尽快可见的图像。

  2. 内容后的图像： 我不确定我是否理解正确。普通图像是内容，从感知性能的角度来看，图像是页面中最重要的部分。那么，您还加载了哪些其他内容？或者您的图像之后当前加载了哪些其他内容？您是否使用 AJAX 加载您的内容？尽快加载可见图像至关重要。如果您通过 JS 触发图像下载，即使您立即启动它，它已经在预加载解析器中隐藏，这意味着它已经在浏览器的下载队列中延迟。此外，如果您有 1-3 个图像在视图中并且大约 10 个在视图之外，那么仅下载这 1-3 个图像已经是一个很大的改进。

综上所述，如果您想进一步延迟加载可见图像，您可以通过lazyload在一段时间后甚至在onload事件之后简单地添加类来实现。

这里有一个例子：

<img src="low-quality.jpg" data-srcset="low-quality.jpg 300w, image-1 480w, image-2.jpg 600w, image-3.jpg 980w" data-sizes="auto" class="big-bg" />

这里是 JS：

$(window).on('load', function(){
     $('.big-bg').addClass('lazyload');
});

这是一个完整的示例，其中还包括使用 CSS 的简单过渡效果：http: //embed.plnkr.co/9tii4RTjYL2CpiQdXlbn/preview

于 2015-03-11T11:51:22.947 回答
1

我建议使用渐进式 jpeg，因为我认为它适合您的用例。即使对于大图像，渐进式 jpeg 也会在加载时提供良好的体验。

此外，您应该尝试利用srcset属性，而不是使用媒体查询来确定图像大小。浏览器将在srcset确定最适合客户端的 imageurl 方面进行繁重的工作。

虽然它目前对浏览器的支持有限，但有一个polyfill可用。

于 2015-03-11T09:21:43.760 回答