Javascript - 顯示div而圖像加載

我正在嘗試學習JavaScript。Javascript - 顯示div而圖像加載

我有一個名爲pre-loader的div類，它覆蓋了z-index高於圖像的屏幕。

我想先載入圖像然後隱藏div。我真不明白的Javascript：

window.onload = function() { 
document.getElementById(「preloader」).style.display =「block」;

我不知道這是否應該是以下加載所有圖片：

document.querySelectorAll('img');

我知道有一個if語句

如果圖像加載隱藏div。

或帶有onload的addEventListener。

我想盡可能具體。我不知道如何編寫它。

由於提前，

來源

2017-05-30 Frank

你不需要做任何事情來顯示你的div，你只需要在圖像加載後隱藏它。

在頁面的生命週期中，一旦頁面上使用的所有外部資源（圖像，樣式表，.js文件等）完成下載，就會觸發load事件。這是一個應該等待所有圖像加載完成的工作的好地方。

// The "load" event only triggers after all resources have finished downloading 
 
window.addEventListener("load", function(){ 
 

 
    // Hide the preloader 
 
    document.querySelector(".preloader").classList.add("hidden"); 
 

 
    // Put the images collection into a proper Array 
 
    var imgArry = Array.prototype.slice.call(document.querySelectorAll("img")); 
 
    
 
    // Loop through images array 
 
    imgArry.forEach(function(i){ 
 
    // Unhide image 
 
    i.classList.remove("hidden"); 
 
     
 
    // Animate image after a short delay 
 
    setTimeout(function(){ 
 
     i.classList.add("animate"); 
 
    }, 0); 
 
    }); 
 
}); 
 

 
// Ignore this code. It's only here to force the images to download 
 
// on every test run. This code is NOT part of the answer. 
 
document.querySelectorAll("img").forEach(function(i){ 
 
    i.src += "?time=" + new Date().toLocaleTimeString(); 
 
});

/* Style the preloader div to be in the center of the page */ 
 
.preloader { 
 
    width:75%; 
 
    height:75%; 
 
    position:fixed; 
 
    top:12.5%; 
 
    left:12.5%; 
 
    background-color:red; 
 
} 
 

 
img { width:200px; display:block; opacity:0;margin:5px;} 
 

 

 
/* This CSS class will be applied to the preloader after the images have loaded*/ 
 
.hidden, img.hidden { opacity:0; transition:all 5s; } 
 

 
/* Sample CSS animation effects to be applied once images are visible */ 
 
.animate { 
 
    opacity:1; 
 
    margin-left:25%; 
 
    transition:all 1s; 
 
}

<div class="preloader"></div> 
 

 
<!-- It's a good idea to set the images to not display initially (this is done with the 
 
    class="hidden" below and the .hidden CSS class. This way you won't see the images at 
 
    all until they are all loaded (i.e. you won't see partially loading images or some, but 
 
    not all images. --> 
 
<img class="hidden" src="https://www.nasa.gov/sites/default/files/images/712130main_8246931247_e60f3c09fb_o.jpg"> 
 
<img class="hidden" src="https://www.cfa.harvard.edu/sites/www.cfa.harvard.edu/files/images/pr/2006-03/1/hires.jpg">

負載事件是由任何資源引發的，因此，這意味着你可以等待所有的資源在整個頁面上要完成加載與window.addEventListener("load", ...)或者你可以做一些事情，當一個特定的資源完成加載，通過引用該特定資源：

var img = document.querySelector("#mySpecialImage"); 
img.addEventListener("load", function(){ 
    // This will be executed when the image with an id of "mySpecialImage" has loaded 
});

來源

2017-05-30 01:22:48

感謝您的幫助。這是有意義的自動分配負載，而不必調用它。有沒有一種方法來專門加載圖像，而無需加載整個頁面，因爲我有圖像動畫，並在div消失播放動畫後我計劃。我遇到了在沒有完全加載圖像的情況下播放動畫的問題。我可以看出發生這種情況的原因是圖像有陰影，陰影在移動。所以我想到把div作爲preloader。 – Frank

@Frank所有你需要做的就是開始你的動畫，作爲'load'事件處理函數中最後一段代碼。 –

@Frank查看包含動畫的更新答案。 –

的方法有很多與我的第一個建議或第二實現以下你要麼工作。

第一條：您等待整個頁面加載，包括具體的圖像，然後做一些

window.onload = function() 
    var yourdiv = document.getElementById('YourDIV'); 
    yourdiv.style.display='none' 
};

二：您等待特定的圖像加載，然後做一些事情

var img = document.getElementById('YourImage'); 
img.onload = function() { 
    var yourdiv = document.getElementById('YourDIV'); 
    yourdiv.style.display='none' 
}

兩個工作，選擇是你的。

來源

2017-05-30 01:15:51

該問題未標記JQuery，那麼爲什麼顯示一個JQuery的答案？ –

true讓我更改爲JavaScript –

完成，感謝提醒我！ –

Javascript - 顯示div而圖像加載

回答

相關問題