I have an AJAX call whose reponse will feed some HTML into a DIV's innerHTML.
The response can contain images, and I'd like to have all these images loaded before my custom loading-div will hide.
I want to do this in vanilla JS. Unfortunately every question I've found here so far does it via jQuery.
I've tried adding an onload Event Listener to both the DIV and the xhttp object, but neither works. The loader disappears as soon as the HTML code is received and inserted, and then the user can witness each image loading individually.
document.getElementById("pageloader").className = "fadein";
var poststring = "&page="+encodeURIComponent(page);
var xhttp = new XMLHttpRequest();
xhttp.addEventListener("load", function() {
document.getElementById("pageloader").className = "fadeout";
});
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
document.getElementById("content").innerHTML = this.responseText;
}
};
xhttp.open("POST", "myajax.php", true);
xhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xhttp.send(poststring);