Lazysizes等待图像完全加载到背景中

Question

我正在使用lazysizes进行惰性图像加载。它工作正常，但是我问自己是否可以在后台加载图像，并在完全加载真实图像后替换src属性。

我现在面临的问题是，可见时将src属性替换为真实图像，但是在互联网连接速度缓慢的情况下，图像从上到下缓慢加载。

我宁愿等到图像加载到背景中，然后替换src属性，以防止出现下面的屏幕快照所示的效果。

我必须使用另一个库，还是可以用lazysizes来隐藏它？

提前感谢！

Answer 1

您可以使用以下代码加载图像：

 function loadImage(url, callback) {
   var img = new Image();
   img.onload = callback;
   img.url = url;
 }

然后在callback上设置图像网址：

 var url = "http://path.to/my/image.jpg";
 loadImage(url, function() {
   document.getElementById("myimg").src = url;
 });