Streaming live at 10am (PST)

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!