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

有没有办法在显示页面之前下载HTML页面中的图片？因为我遇到了一个问题，下面的div显示不正确。我很确定这是由于页面显示后的图像加载。我没有任何问题，在本地，但一旦我与Heroku的部署，我有一个视觉误差，像这样：在显示页面之前完全下载图片

on heroku

本地版本：

locally

会有人有一个想法如何在显示页面的其余部分之前下载它们？我试着用下面的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; 
    }); 
}

谢谢您的帮助和时间

来源

2017-04-21 Arnaud Rochez

只需在'$（window）.load（function（）{ }）内使用它;' – Ozan

这些图像的尺寸是多少？大数据需要时间。在我关心很多的情况下，我只会隐藏这些图像，直到它们使用'load'事件完成加载。 – trevster344

我不认为这是一个加载问题 - 我看到的一切都很好。检查你的CSS。 – Felix

一个快速的方法来做到这一点，顺便说一句，我认为这是很奇怪的，一个图像读取延迟可以造成这种观点的问题：

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

来源

2017-04-21 23:08:10 vlk

请尝试设置图像续的高度餐具和img标签上的宽度和高度。

来源

2017-04-22 03:25:00 itacode

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

回答

相关问题