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

pqwbnv8z 于 2023-08-09 发布在其他

关注(0)|答案(3)|浏览(106)

有没有办法在显示页面之前下载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;
     });
 }

字符串
谢谢你的帮助和时间

css

来源：https://stackoverflow.com/questions/43552804/totally-download-image-before-showing-the-page

3条答案

按热度按时间

vhmi4jdf1#

一个快速的方法来做到这一点，顺便说一句，我认为这真的很奇怪，一个图像加载延迟可以创建这种视图问题：

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

赞(0）回复(0）举报 2023-08-09

jv2fixgn2#

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

赞(0）回复(0）举报 2023-08-09

4si2a6ki3#

您可以使用preload link tag：

<link rel = "preload" href = "path/to/image.png" as = "image">

字符串

赞(0）回复(0）举报 2023-08-09

我来回答

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

3条答案

相关问题

热门标签

最新问答