Question

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

我想做的是背景图片优先。然后必须显示其他。同步或异步并不重要。

我尝试过的事情：我将背景图片div替换为dom顶部。没有用。

getElementTypeEnums()

也不行。

我以前尝试过几件事。但是我仍然有同样的问题。

Answer 1

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

然后我在这里看到两个选项。对于这两者，我将使用一个有助于检测何时加载图像的库：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" />

Answer 2

尝试将以下内容移到CSS文件的顶部

  #theBackgroundImage{
  background : url(..)
  }

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

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

2 个答案: