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

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

一种快速的方法，顺便说一句，我认为图像加载延迟会造成这种 View 问题真的很奇怪:

$(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>