延迟加载视网膜图像？

Question

我有这个带有视网膜图像@2x 和@3x 的基本延迟加载脚本。

(function(doc) {
  var div = doc.querySelector('div');
  var img = doc.querySelector('img[data-src]');

  img.onload = function() {
    img.removeAttribute('data-src');
    div.classList.add('done');
  };

  img.setAttribute('src', img.getAttribute('data-src'));
})(document);

img {
  width: 300px;
  margin: 0 auto;
  display: block;
}

img {
  opacity: 1;
  transition: opacity 0.3s;
}

img[data-src] {
  opacity: 0;
}

div {
  position: relative;
  min-height: 222px;
}

div:after {
  content: '';
  position: absolute;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  border-top: 1px solid #9a9a9a;
  border-left: 1px solid #9a9a9a;
  top: 50%;
  left: 50%;
  margin-top: -25px;
  margin-left: -25px;
  animation: id 1s linear infinite both;
}

div.done:after {
  display: none;
}

@keyframes id {
  to { transform: rotateZ(360deg) }
}

<div>
  <img
  src="https://s3-eu-west-1.amazonaws.com/cornerjob-cdn/background.png"
  data-src="https://s3-eu-west-1.amazonaws.com/cornerjob-cdn/background.png"
  srcset="https://s3-eu-west-1.amazonaws.com/cornerjob-cdn/background@2x.png 2x,
          https://s3-eu-west-1.amazonaws.com/cornerjob-cdn/background@3x.png 3x">
</div>

浏览器根据设备像素比确定要加载的图像。
据此：

• 识别浏览器正在加载哪个图像的最佳做法是什么？
• 是否必须为我拥有的每个视网膜图像设置自定义属性？
• 一般来说，使用延迟加载图像和视网膜图像解决问题的最佳方法是什么？

Answer 1

1) 要查看浏览器正在加载哪个图像，请在此处参考：Is it possible to see which srcset image a browser is using with browser developer tools

2) 任何来自服务器或静态 HTML 的图像都需要自定义属性，当延迟加载时，您可以在检测用户是否为 HiDPI 后在函数中设置属性，请参见此处：https://coderwall.com/p/q2z2uw/detect-hidpi-retina-displays-in-javascript

3) 我个人会使用像 bLazy 这样的库：https://github.com/dinbror/blazy/

Answer 2

这可能会帮助您签出一个非常好的延迟加载插件，兼容所有浏览器和 IE7+。

http://luis-almeida.github.io/unveil/