javascript - 强制在其他背景图像之前加载背景图像

Question

有没有办法在下载其他图像之前强制下载特定图像(优先图像)？

我使用了很多背景图片。我的着陆页有一个渐变填充，用作我的着陆页的第二张图片。

着陆页 CSS:

.bg-img1::before {
  background-image: url(https://mywebsite/images/myimage.jpg), linear-gradient(to top, #206020, white);
  background-size: cover, cover;
}

我不再使用 DOM 就绪检测，因为我的背景图像渐变在我的着陆页图像下载前 3 或 4 秒显示...

$(function() {
    // DOM ready, but image hasn't downloaded yet.
});

现在我使用 window.onload 并且一切正常，但是我添加了越来越多的图像并且下载延迟变得越来越严重。

window.onload = function() {
  // delay, delay... finally my landing page with gradient displays
});

重申一下我的问题，我希望能够优先下载我的着陆页。如果我切换回使用 DOM 就绪，有没有办法确保我的背景图像在显示渐变之前显示？

Answer 1

添加图像标签并将源放在其中。确保将 display none 添加到此标记。将此标签放在您的 body 标签中。这应该优先考虑您的图像加载。希望这对你有用。