JS alert after all content is loaded

I need to make an alert after all content is loaded and user can see all images 100%.

I do this way – I made a function in the end of my webpage (be fore the BODY tag is closed:

window.onload=function(){
  alert("This is my alert text");
}

But it doesnot work. The alert comes when some images are not loaded. Especially on mobile devices. On desktop it works sometimes

Answer

This will help:

document.addEventListener('readystatechange', function(event) {
    console.log(event.target.readyState); // check for more states
    if (event.target.readyState === "complete") {
        alert("Everything loaded now including images, scripts and styles.");
    }
});

Please check @ CodePen https://codepen.io/animatedcreativity/pen/07c67507a741a76f4ae208d52a29cf7b/

^ I have added big images for you in the example. Alert will show up only after everything is fully loaded.