Photo by Dominik QN
Dear Ms. FEWD,
I have developed a tabbed layout in Tridion. The client can load as many images as they want into these tabs, which can cause load-time issues with the page being so image-heavy. I am trying to use lazy loading to load my images within the content staging area where my tabs are switching in and out on click. However, when I click my tabs from left to right, I notice I have to scroll much farther down the page past the images to get the lazy loading to fire. The more tabs and content I have, and the further right the active tab is, the longer I’m scrolling.
Lazy loading is being lazy
Sounds like you’re using visibility:hidden on your content staging area to hide them while they’re not active.
Using display:none on your hidden content staging area will fix this as lazy loading won’t see the image until the staging area has been clicked and is active.
What’s the difference between visibility:hidden and display:none? Using visibility:hidden means that the tag (and, by proxy, the content within that tag) is hidden, but the space remains on the page. You can’t see it, but it renders. On the other hand, display:none hides the tag from everything but the DOM.
What’s happening is that lazy loading is seeing the image positions as they appear in the HTML document, despite your layout where the content all appears in the same space. So, you’re scrolling farther down your page to reach the last tab than you did for the second one.
Additionally, due to the fact that you say you have to scroll to get lazy loading to fire after your tab click, try firing lazy loading after the click.
//hide/show functionality for the tabs
//active section, find everything with the lazy class and lazy load with the fade in effect, then remove the lazy class so that it only does the lazy loading once per tab click
effect : "fadeIn"
Depending on how your HTML is set up, you will need to find your tabbed staging area and add to the $("section.active") piece. The goal is to find where your active staging area is on click of that tab, fire lazy loading, and then remove the class so it doesn’t repeat if your user is clicking around. For example, if you had an accordion set up, you might need to set up your script like this:
//code to expand/collapse the section
//find the parent of this accordion-header, then within this parent container find everything with the lazy class, fire lazy loading with the fadeIn effect, and then after it fires, remove the lazy class
effect : "fadeIn"
Do you have a front end development question? Ms. FEWD has answers. Email her at MsFEWD@tahzoo.com