0

I have made some modifications to a website I am working on and now, when I load the homepage, the header image seems to load after the rest of the page leaving a white space and then the image loads it pushes the rest of the page down to where it should be. This site is created from scratch with HTML, CSS and JS. The website is https://www.visionwebdesign.ca so you can have a look. Once the webpage is in the browser cache, it loads fine.

The header is actually a part of a carousel of images. Here is the code I am working with:

Vision Web Design ...

I have tried reducing my images to a smaller size but no luck there. Looking for any help available.

J.P.

goldswoj
  • 11
  • You can preload the images in the `` so they are loaded before the ``. Place an extra tag to the head to preload it. `` [Preloading images](https://web.dev/preload-responsive-images/) – deekeh Aug 27 '21 at 03:39
  • Adding the "preload" seems to have worked perfectly. Great tip and thank you so much. A very simple solution! – goldswoj Aug 29 '21 at 20:57

2 Answers2

1

This is probably not the answer you are looking for, but looking at the HTML page code it appears you are just loading in the images quite normally using IMG tags, no script code in use there, so any delay may simply be the time it takes for the images to download from the server to the browser. I saw just a bit of a delay in loading the header image (tried in both Firefox and in Chrome) but I'm on a 300Mbps down internet connection so everything is fairly quick.

Image size may be one thing to look at. Alternately setting the content DIV to display:none until after the first image has loaded then switching it using Javascript. I found this example here at Stack Overflow:

Don 'FreihEitner' Eitner
  • 75
  • 6
  • The image that I am using is only at 205 KB so pretty small already. Is there a way through js to make sure that the img loads first or at least at the same time as the rest of the page? I tried to add the code to the post but looks like it didn't display it. I can send you the code if you wanted to have a look to help it make better sense. I can send you my email address. – goldswoj Aug 24 '21 at 02:11
  • I am no expert in Javascript - barely a novice. I just searched online for "javascript load images before displaying page" and "javascript hide page until all images load". Several of the simpler methods seem to use JQuery, which is a JavaScript framework, not sure if you are using it or not. – Don 'FreihEitner' Eitner Aug 25 '21 at 04:57
0

A method of solving this problem would involve hiding the full body for the 2 seconds or however long it takes to load the body. We can do this using Javascript:

var timeouttimer = setTimeout(showbody, 2000);
var everything = document.getElementById("allcontent");
function showbody {
everything.style.display = "block";
}

And then in the HTML add the following div surrounding all the content of your webpage:

<div id="allcontent" style="display: none;">
Matthias
  • 170
  • 15