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而图像加载

回答

相关问题