延迟加载视网膜图像？

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

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

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