Javascript 在页面加载完成之前显示图像

我有一个移动网站，有一些内容和图片

图像最初设置为[显示：无]。完全加载后，它将更改为[显示：块]。下面显示了我所做的工作：

// Other website codes................

<div id='creative_div' style="display:none; width:100%;">
<img id='banner' src='http://www.example.com/my_image.jpg' style="width:100%;">
</div>

<script> 
window.onload=function(){
if (document.getElementById("banner").complete && document.getElementById("banner").naturalWidth != 0){
loadImage();
}
if (!document.getElementById("banner").complete || document.getElementById("banner").naturalWidth == 0){
hide('creative_div');
}
}
</script>

<script>
function loadImage() {
document.getElementById("creative_div").style.display="block";
}
</script>

// Other website codes............

//其他网站代码。。。。。。。。。。。。。。。。
window.onload=function（）{
if（document.getElementById（“banner”）.complete和document.getElementById（“banner”）.naturalWidth！=0）{
loadImage（）；
}
如果（！document.getElementById（“banner”）.complete | document.getElementById（“banner”）.naturalWidth==0）{
隐藏（“创意部门”）；
}
}
函数loadImage（）{
document.getElementById（“creative_div”）.style.display=“block”；
}
//其他网站代码。。。。。。。。。。。。

因此，在这种情况下，图像将在页面加载时开始加载，并在页面加载完成后显示

然而，我希望图像显示一旦加载，无论网站是否已完全加载。我已经搜索过这个问题，但似乎Javascript必须在页面完全加载后执行。我还发现了一些用于Javascript的“async”，所以我真的不知道它是如何工作的

---

有什么建议吗？谢谢大家。

您试图解决的问题并不完全清楚，但您可以将一个onload处理程序附加到图像对象本身，然后在图像加载时，它可以使自己可见，而不考虑页面其余部分的加载状态（例如，即使页面其余部分仍在加载）

函数showme（obj）{
obj.style.display=“块”；
}

或者，如果要使父容器可见，则可以是：

<img id='banner' onload='showme(this)' src='http://www.example.com/my_image.jpg'
 style="width:100%;">

function showme(obj) {
    obj.parentNode.style.display = "block";
}

函数showme（obj）{
obj.parentNode.style.display=“block”；
}

您试图解决的问题并不完全清楚，但您可以将onload处理程序附加到图像对象本身，然后在图像加载时，它可以使自己可见，而不考虑页面其余部分的加载状态（例如，即使页面其余部分仍在加载）

函数showme（obj）{
obj.style.display=“块”；
}

或者，如果要使父容器可见，则可以是：

<img id='banner' onload='showme(this)' src='http://www.example.com/my_image.jpg'
 style="width:100%;">

function showme(obj) {
    obj.parentNode.style.display = "block";
}

函数showme（obj）{
obj.parentNode.style.display=“block”；
}

另一个技巧是在第一页显示图像。然后从该页面加载原始页面。：）

---

这样，图像将在加载后立即显示。然后在第一页的onload事件中，您可以调用第二页代码：//

另一个技巧是在第一页上显示图像。然后从该页面加载原始页面。：）

---

这样，图像将在加载后立即显示。然后在第一个页面的onload事件中，您可以调用第二个页面代码：//

将js（onload处理程序）与html混为一谈不是一个好主意。更好的方法是为所有图像附加外部html处理程序，然后处理样式更改。@KarolSikora-如果您希望加载处理程序在加载页面javascript之前启动，并且如果图像立即从浏览器缓存加载，则立即启动，然后，您不能稍后通过javascript安装事件处理程序-如果在HTML中指定了图像，您还必须在HTML中安装事件处理程序。这是确保在映像完成加载时安装加载处理程序的唯一方法。这是一种事件处理程序需要在HTML中的情况。将js（onLoadHandler）与HTML混为一谈不是一个好主意。更好的方法是为所有图像附加外部html处理程序，然后处理样式更改。@KarolSikora-如果您希望加载处理程序在加载页面javascript之前启动，并且如果图像立即从浏览器缓存加载，则立即启动，然后，您不能稍后通过javascript安装事件处理程序-如果在HTML中指定了图像，您还必须在HTML中安装事件处理程序。这是确保在映像完成加载时安装加载处理程序的唯一方法。在这种情况下，事件处理程序需要位于HTML中。