加载特定图像，然后加载整个页面

Question

我有一张背景图片和很多产品图片。很快，整个页面的 %88 是图像。但是当我刷新页面时。部分产品正在展示。之后我的背景来了。然后其他divs，图片来了。

我想做的是我的背景图片放在第一位。然后必须显示其他人。同步或异步并不重要。

我尝试了什么： 我将我的背景图片 div 替换到了 dom 的顶部。没用。

window.onload=function () {
document.getElementById("theBackgroundImage").style.visibility = "visible";
}

也没有用。

我之前尝试过几种方法。但我仍然有同样的问题。

Answer 1

尝试将以下内容移至 css 文件的顶部

  #theBackgroundImage{
  background : url(..)
  }

也许您需要使用（延迟加载图像）=> url

Answer 2

首先，您需要检测所有图像何时加载。或者最好是当您想要的所有图像首先显示时。

然后我在这里看到两个选项。对于两者，我将使用一个库来帮助检测何时加载图像：https://imagesloaded.desandro.com/

第一个选项

只显示您的图像。

imagesLoaded( 'img', function() {
  document.querySelectorAll(".displayAfter").forEach(e => e.style.visibility = 'visible'
  )
});

.displayAfter {
  visibility : hidden;
}

<script src="https://unpkg.com/imagesloaded@4/imagesloaded.pkgd.min.js"></script>

Image here :
<img width="50px" height="50px" src="https://picsum.photos/50/50?random" />
Lazy loaded image here :
<img class="displayAfter" width="50px" height="50px" src="https://picsum.photos/50/50" />

第二个选项

不要先加载您的图像（例如 src 为空或指向空白图像）然后更改图像的 src 属性。在这里，我在图像中使用了一个 data-src 属性，一旦加载了所有其他图像，我只需将其插入到图像 src 属性中。

imagesLoaded( 'img', function() {
  document.querySelectorAll(".displayAfter").forEach(e => 
    e.setAttribute('src', e.getAttribute('data-src'))
  )
});

<script src="https://unpkg.com/imagesloaded@4/imagesloaded.pkgd.min.js"></script>

Image here :
<img width="50px" height="50px" src="https://picsum.photos/50/50?random" />
Lazy loaded image here :
<img class="displayAfter" data-src="https://picsum.photos/50/50" width="50px" height="50px" />

加载特定图像，然后加载整个页面

Load specific image, then load the entire page

html

javascript

css

lazy-loading

image