Javascript - 画像読み込み時にdivを表示

Question

JavaScriptを習得しようとしています。

私は画像よりも高いz-インデックスで画面を覆うプリローダーと呼ばれるdivクラスを持っています。

最初に画像を読み込んでdivを非表示にしたいと思います。私には、JavaScriptに本当に明確ではないよ：

window.onload = function() { 
document.getElementById(“preloader”).style.display =“block”; 

、すべての画像をロードするために、次の必要がある場合、私はわからない：

document.querySelectorAll('img'); 

私はif文

が存在しているはず

イメージがロードされている場合はdivを非表示にします。

またはonloadを持つaddEventListener。

私は可能な限り具体的にしようとしています。私はそれを書く方法がわかりません。事前に

おかげで、

Answer 1

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", ...)でロードが終了するように全体のページ上のすべてのリソースを待つことができたりするときある特定のあなたが何かをすることができることを意味してloadイベントは、任意のリソースによってトリガされます

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

Answer 2

私の最初の提案では、次のお仕事のどちらかまたは第二を達成するための多くの方法があります。

まず：あなたは、特定の画像を含むロードするためにページ全体を待ってから、何か

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' 
} 

両方を行う、その後にロードするために、その具体的なイメージを待ちます仕事、選択はあなたのものです。