在javascript中计算网页完全加载的元素

时间:2009-04-07 23:44:59

标签: javascript html dom

有没有办法找出通过javascript在网页中加载多少元素?
例如,我将向访问者展示这样的内容:

  

加载了3个物体,剩下10个物体!请稍等。

1 个答案:

答案 0 :(得分:5)

如果“元素”是指DOM元素,则不是。在加载之前你不知道它们是否存在,并且在完成加载之前尝试进行DOM查询并不是非常可靠。

如果你的意思是“图片”或类似的东西,你可以在你的页面上放置这样的东西:

<div id="loadingMessageContainer"></div>

并将其放在页面底部(</body>下方)

<script type="text/javascript">
var imageCount = 0;
var imagesLoaded = 0;

//a function to execute when each image is loaded ("event handler")
function handleImageLoad() {
    imagesLoaded++;
    updateImageDisplay();
}

//a function which updates your message in the page
function updateImageDisplay() {
    var displayContainer = document.getElementById('loadingMessageContainer');
    var remaining = imageCount - imagesLoaded;
    displayContainer.innerHTML = imagesLoaded + ' objects loaded, ' + remaining + ' remain. Please wait.';
}

//get # of images on page and attach the OnLoad event handler
var images = document.getElementsByTagName('img');
imageCount = images.length;
for(var i=0;i<images.length;i++) {
    images[i].onload = handleImageLoad;
}
</script>