Question

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

＆＃13;

(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);

＆＃13;

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) }
}

＆＃13;

<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>

＆＃13;

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

确定哪个图片是浏览器加载的最佳做法是什么？
我是否必须为每个视网膜图像设置自定义属性？
一般来说，解决使用视网膜图像的延迟加载图像的最佳方法是什么？

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/

延迟加载视网膜图像？

2 个答案: