Fade in background image only after it loads

Hi! I have a hero image (#hero-image) with a background image that changes from page to page. I’d like to only fade it in AFTER the img has loaded completely. How would I go about doing that using JS? I tried various solutions found on Stack Overflow but couldn’t find a working one. Would really appreciate your help! I’m working on a pro-bono project for an NGO, otherwise I’d offer up some $ for the help. Thanks!

@Pascal_Tremblay, have you tried using the “Wait for assets to load” option in the Legacy Interaction designer?

51%20PM

This causes the “page load” Interaction to only trigger after the browser indicates that it has completed downloading all of the files for the page.

This particular feature is often used to hide a loader element after the page has finished loading.

Hope this helps!

Wilson

You’re a genius! It was right under my nose :slight_smile: Thanks

:+1:

Be sure to mark that as a solution so others can find it!

Cheers!