How to load the body of HTML after loading all images

Question

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:

onLoad event for loading all images

But it doesn't work exactly as expected or it's me who doesn't know how to use it....

So, is this the best way for using the onload event to wait all the images to be loaded or do you recommend another one?

I want the images to be preloaded on this Web Site: The link. The map image is bigger so that's why it lasts more than the right one. But it can't be smaller, as it's a transparent image... So I decided to preload all images after showing the complete Web page. But still couldn't... Any idea?

Do you want to show the html page only after all the images have loaded? If so, I'm not sure this is a very good idea but I think I know how it could be done — BBog, Oct 22 '12 at 14:31
@BBog , yes, I know it's not the best idea, but unfortunatelly that's what I need... — Sonhja, Oct 22 '12 at 14:32

score 2 · Answer 1 · answered Oct 22 '12 at 15:16

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>

score 0 · Answer 2 · answered Oct 22 '12 at 14:34

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.

score 0 · Accepted Answer · edited May 23 '17 at 12:06

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.

score 0 · Answer 4 · answered Oct 22 '12 at 14:39

0

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

answered Oct 22 '12 at 14:39

Diego ZoracKy

2,227
15
14

score -1 · Answer 5 · answered Oct 22 '12 at 14:27

-1

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

answered Oct 22 '12 at 14:27

YardenST

5,119
2
33
54

How to load the body of HTML after loading all images

5 Answers5

Linked