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?


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!


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


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