How To Load The Body Of HTML After Loading All Images

January 30, 2023 Post a Comment

I'm trying to write some code for the onload() event of a Web page, on which I want to wait for the Web page to appear until all images are loaded on the Web page. I found this: on

Solution 1:

If I understood you correctly, this is how I would do it:

1) first, I would add a 'loading div', to hide the html content and I would remove that div when all the images are loaded. Not only it's more elegant to show a loading message and/or a loading indicator, but it's also easier than to actually load the page after the images. This would imply that you dynamically create and load the content after the images are done and you would need to do some more work.

2) Then I would select all the images and add a simple function to their onload event that would increment the number of loaded images and call a function that checks to see if all the images are loaded. If all the images are loaded, I would remove the loading div and that's all.

Here's some working code below (minus the images, you need to add them yourself). Basically, instead of the div with images you should have your own html code and before or after (better before though), add the 'loading div' (keep in mind that my css style for it it's not good practice)

<!doctype html>
<html>
<head>
<script>
window.onload = function() {

    var images = document.getElementsByTagName('img'),
        totalImages = images.length,
        imagesLoaded = 0,
        img;


    function checkForLoaded() {

        if(imagesLoaded === totalImages) {
            var loadingDiv = document.getElementById('loadingDiv');
            loadingDiv.parentNode.removeChild(loadingDiv);
        }
    }


    for (var i = 0; i < totalImages; i++) {
        img = new Image();

        img.onload = function () {

            imagesLoaded++;
            checkForLoaded();
        }

        img.src = images[i].src;

    }
}

</script>
</head>
<body>

    <div id="content">
        <img src="0001.jpg">
        <img src="0002.jpg">
        <img src="0003.jpg">
        <img src="0004.jpg">
        <img src="0005.jpg">
        <img src="0006.jpg">
        <img src="0007.jpg">
        <img src="0008.jpg">
        <img src="0009.jpg">
        <img src="0010.jpg">
    </div>

    <div id="loadingDiv" style="height:2000px; width: 2000px; position: absolute; top: 0px; left: 0px; background-color: #FFFFFF">
        loading
    </div>
</body>
</html>

Solution 2:

I would try setting adding specific class such as loading to the html or body element, hook a function up to the onload event/using jQuery in which you load all the images, and the once the images have been loaded remove the loading class from the html/body element.

Then add some CSS to hide the entire page contents and instead display some loading placeholder in case the loading class is present. Caution should be taken to add this class only when the user has javascript enabled. The js and no-js classes added by Modernizr can aid in doing this, or naturally simply adding the loading class using javascript.

As for the actual preloading, this and this are two quite extensive threads that deals with preloading images.

Solution 3:

I don't understand what result you want, but if you want to load certain images before loading the <body> tag you can use JavaScript:

<script type="text/javascript">
var image1=new Image()
image1.src="pathway to image"
var image2=new Image()
image2.src="pathway to image"
</script>

If you put this JS in the <head> tag, then those pictures will be loaded before the body. Simply use the variables (in this example image1 and image2) instead of the normal HTML <img> tag.

Solution 4:

You should use $(window).load() instead of $(document).ready()

Solution 5:

Consider use Jquery with the load event on the document. more info here document load event vs ready

Html5 Dev