Comptage d'éléments de page Web entièrement chargés dans javascript

Question

Y a-t-il un moyen de savoir combien d'éléments vont être chargés dans une page Web via javascript?
par exemple, je vais montrer quelque chose de visiteur comme celui-ci:

3 objets chargés, 10 restent en général! S'il vous plaît, attendez.

Answer 1

Si par "éléments" vous voulez dire des éléments DOM, pas. Vous ne savez pas qu'ils existent jusqu'à ce qu'ils soient chargés, et il n'est pas très fiable d'essayer de faire des requêtes DOM avant que le chargement ne soit terminé.

Si vous voulez dire « images » ou quelque chose dans ce sens, vous pouvez mettre quelque chose comme ceci sur votre page:

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

Et mettre cela au bas de la page (ci-dessous </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>