Load hero background image first

Design help General
1

Hi, is it possible to force a hero background image load first before the other images start loading?

2

No. The browser handles asset load order. It’s pretty technical and varies depending on the server, markup order, network, etc… However, with some JavaScript you could delay the loading of assets after the hero, which I would not recommend doing.

What issue are you trying to solve?

3

Thanks! I have few pages with 100+ photos (photography portfolio) so the hero image loads with delay.

4

Maybe you could hide the rest of the elements of your page… and only show the hero…
When page is loaded you could show the other elements?

something like this:

<script>
 $('body > :not(#hero)').hide(); //hide all nodes directly under the body
 $('#hero').show();
$( document ).ready(function() {
   $('body > :not(#hero)').show();
});
</script>
5

Hi @ElviraNL, can you please give me more details how this can work? Do i have to create an interaction or just with the script?

6

Can you show me a share link if possible? I can make screenshots of where to put the code.

You only have to put the code into your homepage.

7

Thank you @ElviraNL, here is my share link

https://preview.webflow.com/preview/giorgos-evagelou?utm_medium=preview_link&utm_source=designer&utm_content=giorgos-evagelou&preview=3dbbfbf9f593810e2310ffd58538860e&pageId=5d91cdb0ae00220e7f71a332&mode=preview

Check the page W MICHALIS IOANNA

8

@Giorgos Try this:
Go to the page it’s settings. Go to body settings.
Add the code:

<script>
 $('body > :not("#Logo-Photo-Section, #Logo-Section")').hide(); //hide all nodes directly under the body except the logo navigation and photosection
 $('#Logo-Photo-Section, #Logo-Section').show();
 $( document ).ready(function() {
   $('body > :not("#Logo-Photo-Section, #Logo-Section")').show();
 });
</script>

image
image1500×932 241 KB

Let me know if it works.

9

No luck @ElviraNL still loading with delay after everything else.

10

could you try changing the part of

$( document ).ready(function() {

to

$(window).on("load", function (e) {

Document ready waits for text assets to be loaded, the window load function is supposed to wait for all the images and text assets to finish loading before executing.

11

Nope, isn’t working @ElviraNL. Probably i will use a normal photo, not a background.

12

That’s to bad. Hope that will work out for you :slight_smile:

13

I would consider using Chrome’s support for lazy loading for all images below the fold. At least you could make life easier on Chrome users and it should work for them. There are other Lazy solutions but this one is a no-brainer. The others can be hard to implement but can work with multiple browsers.

See Lazily load iframes and images via ‘loading’ attribute - Chrome Release 76