Preloading JS calculation prior to images loading

Question

This is essentially a follow up question to this question:

Positioning a div relative to a fixed div with responsive content

So we are on the same page, it might help if you read through that article! :)

Thank you in advance.

I am using the Javascript from the linked article's answer for a separate project where the "color" div is now a "content" div and inside of my content div are roughly 30 images. I'm having no issue getting my "content" div to position correctly with the fixed div now, but the issue I'm having is when I incorporate the Javascript that positions the "content" div, it is calculating and positioning the "content" div AFTER everything in that div is loaded. So essentially the first image is getting hidden under the fixed header until all the images are loaded and then it will position it where it needs to be. I need it to position the "content" div prior to any of the images inside of the "content" div loading.

I have done research trying to figure out how to pick and choose which code gets read first, but all of the things I have tried haven't worked yet. My most recent attempt was putting the JS that positions the "content" div right below the "head" and before the "body" so it is read first, but it still doesn't position the "content" div until everything in it fully loads.

Where am I going wrong?

Here is a JSFiddle with the code: https://jsfiddle.net/8wkotamf/

Here is the Javascript (also in the JSFiddle):

window.addEventListener('load', function() {
var headerHeight = document.getElementById('header').clientHeight;
document.getElementById("content").style.paddingTop = headerHeight + "px";
var footerHeight = document.getElementById('footer').clientHeight;
document.getElementById("content").style.paddingBottom = footerHeight + "px";
}, true);

window.addEventListener('resize', function() {
var headerHeight = document.getElementById('header').clientHeight;
document.getElementById("content").style.paddingTop = headerHeight + "px";
var footerHeight = document.getElementById('footer').clientHeight;
document.getElementById("content").style.paddingBottom = footerHeight + "px";
}, true);

It will be nearly impossible to recreate the issue on the JSFiddle because since the images aren't actually embedded, it loads instantly and you can't tell that the positioning happens after they are all fully loaded. Hopefully all the code will make it an easy fix though! Fingers are crossed!

Thank you guys so much. I appreciate it immensely.

Answer 1

window.addEventListener('load' ... fires when everything in the window has loaded - the HTML document and all content including images. You want your function to run when the document is loaded, ie the DOM is ready, but not necessarily waiting till all other resources such as images are fully loaded.

If you don't need to support IE 8 or lower try document.addEventListener("DOMContentLoaded", function() {... instead. This will fire when the DOM is parsed and ready, not waiting till images etc are loaded. If you do need to support old IE versions use Jquery's $(document).ready().

See window.onload vs $(document).ready() for more information.