1

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

图像最初设置为 [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 的“异步”的东西，所以我真的不知道它是如何工作的......

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

4

2 回答 2

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";
}
于 2013-10-13T07:39:21.990 回答
0

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

于 2013-11-25T00:51:51.663 回答