Closed. This question does not meet
Stack Overflow guidelines。它当前不接受答案。
想改善这个问题吗？
Update the question，所以它是
on-topic，用于堆栈溢出。
5年前关闭。
我制作了一个看起来可以接受的网站，并在合理的加载时间与不过度压缩JPEG图像之间取得了平衡。一个令人担忧的是，有一个100％拉伸的全屏背景，尽管在13英寸显示屏上看起来不错，但可能会在5K视网膜显示屏上带来丑陋感。我无法证明为移动用户提供大量图片而使他们遭受痛苦。我正在寻找的是“惰性加载器”或“延迟加载器”，它们可以检测显示尺寸和像素密度（视网膜与非视网膜），并提供可能的最高质量图像-但前提是必须将所有网站内容使用适度压缩的图像加载并处于可浏览状态。如果可能的话，我希望高分辨率替换图像在它们叠加并替换默认分辨率图像时进行淡入过渡。我希望用户可以清楚地知道页面已加载并且可以进行交互，这意味着没有进度条指示内容尚未完成下载。
目标/步骤
使用适度压缩的图像快速加载基本页面。该页面现在可以与之交互并且看起来并不可怕。当搜索引擎搜索页面时，应在此阶段将其视为已满载，否则页面排名可能会受到影响。
检查设备的显示尺寸和像素密度，以了解要交换的分辨率图像。
以适当的分辨率提供图像，但将其隐藏起来，直到它们完全加载并准备淡入。
淡入高分辨率图像。（无需在图像之间同步淡入，当准备就绪时，每个淡入图像都可以在其低分辨率图像上淡入）
我要奇迹吗？我是否应该放弃并坚持使用中等压缩程度的图像？我不是唯一一个愿意这样做的人，所以我试图找出可用的技术。
我在网上找到了一些零碎的答案，但是没有一个地方能找到将它们联系在一起的解决方案。似乎没有“最佳实践”来处理此问题，这令人惊讶。我知道，如果您在视网膜设备上查看视网膜网站，apple.com会提供视网膜图像，但我不知道它们是如何做到的（
Example: store photo）。我发现了一个懒惰地加载视网膜图像的脚本（在jsfiddle上，所以我不会用代码链接和弄乱这篇文章），但是它是由滚动触发的，我不知道如何重做代码以在加载之后页面内容。这是使用jQuery的
another lazy loader，尽管我无法让它为我工作，而且我也不知道如何在页面内容加载后加载它，也不知道如何使图像褪色在现有的低分辨率显示器中，我也不知道如何合并视网膜显示检测。
对于没有太多javascript知识的人，是否有希望能够使用一些现有代码来实现这一目标，还是我应该继续在Lowres Land中微薄的生存？
编辑：我认为比“延迟加载”更相关的术语可能是“延迟加载”。我发现延迟加载通常是指在向下滚动页面时呈现的内容。我优化了搜索范围。将在这里发布任何发现。我目前正在阅读
this，但还没有全部消化。
Edit2：我认为jQuery的deferr和fadeIn一起使用（以及针对视网膜的媒体查询）可能可以解决问题。我在jQuery文档中找到了
an example，看起来像是我想要的变体。
但是，我想尽一切办法将它们捆绑在一起。
首先，您应该真正研究lazySizes。这是一个lazyloader，它建立在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" />
关于您想做的事情的某些部分不清楚或不太好。
您的LQIP计划：
如果您有很多图像（例如，一页上超过6张图像）。我不会对所有图像使用LQIP，而不会对所有图像使用LQIP，因为如果添加大量图像，它们仍然需要下载并且浏览器一次只能处理6个请求。这意味着，如果用很多小图像收集页面，您将不会获得太多的性能。在这种情况下，最好完全不下载图像，而仅加载图像，这些图像应尽快出现。
内容后的图片：
我不确定我是否理解这一权利。正常图像是内容，从感知性能的角度来看，图像是
most important parts of a page。那么，您还要加载什么其他内容？或在图像之后当前还加载了哪些其他内容？您是否使用AJAX加载内容？尽快加载可见图像至关重要。而且，如果您通过JS触发图像下载，即使您立即启动它，它也已从
preload parser隐藏，这意味着该图像已被推迟在浏览器的下载队列中。此外，如果您可以看到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