Question

我有一个包含一些内容和图片的移动网站。

图像最初设置为[display：none]。完全加载后，它将变为[display：block]。下面显示了我做了什么：

// 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............

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

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

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

Answer 1

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

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

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

或者，如果您想让父容器可见，那么它可以是：

<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";
}

Answer 2

另一个技巧可以是在第一页上显示图像。然后从该页面加载原始页面。 :) 这样一旦图像加载，图像就会显示出来。然后在第一页的onload事件中你可以调用第二页代码：/

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

2 个答案: