在顯示頁面之前完全下載圖片

有沒有辦法在顯示頁面之前下載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

在顯示頁面之前完全下載圖片

回答

相關問題