在显示页面之前完全下载图像

Question

有没有办法在显示页面之前在HTML页面中下载图像？因为我遇到了下面的div没有正确显示的问题。我很确定这是由于页面显示后的图像加载。我在本地没有问题，但是一旦我使用Heroku部署它，我就会出现如下错误：

本地版本：

在显示页面的其余部分之前，是否有人知道如何下载它们？我尝试使用以下JavaScript，但它不起作用：

preload([
     './webapp/dist/images/chantier1.jpg',
     './webapp/dist/images/chantier2.jpg',
     './webapp/dist/images/chantier3.jpg'
 ]);

 function preload(arrayOfImages) {
     $(arrayOfImages).each(function(){
         $('<img/>')[0].src = this;
         // Alternatively you could use:
         // (new Image()).src = this;
     });
 }

感谢您的帮助和时间

Answer 1

一种快速的方法，顺便说一下，我认为图像加载延迟会产生这种视图问题真的很奇怪：

$(window).load(function() { 
    $('.loader').fadeOut(1000);
});

img{
  width: 100%
}
.loader{
  position: fixed;
  height: 100vh;
  width: 100%;
  background-color: white;
  top: 0px;
  left: 0px;
}
p{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
}
  

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <img src="https://images.unsplash.com/39/wdXqHcTwSTmLuKOGz92L_Landscape.jpg">
    <img src="https://static.pexels.com/photos/1029/landscape-mountains-nature-clouds.jpg">
<div class="loader">
     <p> loading </p>
</div>

Answer 2

请尝试在img标签上设置图像容器的高度以及宽度和高度。