Bug #5158


Image load issue on banner page builder in Make theme

Added by Luke Waltzer over 8 years ago. Updated over 8 years ago.

Priority name:
Category name:
WordPress Themes
Target version:
Start date:
Due date:
% Done:


Estimated time:
Deployment actions:


This is a decidedly non-emergency issue, but I was hoping Boone might take a quick look the front page for (let me know if I need to add you... I'm planning to make the site public next week).

You'll see that I have image slides with text behind them above the fold... when the page loads or reloads, each of the slides flickers on the screen before settling into their place in the automatic slideshow. I'm curious if this is an issue with the way the theme is written (I've looked through the support forums for Make and have not seen a report on this), or if this is another issue that might have quick fix.

Again, not a big deal, just a slight annoyance.


Actions #1

Updated by Matt Gold over 8 years ago

  • Status changed from New to Assigned
  • Assignee set to Boone Gorges

Thanks, Luke. I've noticed similar issues (page elements loading before styles are applied -- I see this, for instance, on the Group Files pages) elsewhere on the Commons. Curious to hear Boone's take.

Actions #2

Updated by Boone Gorges over 8 years ago

  • Category name set to WordPress Themes
  • Status changed from Assigned to Reporter Feedback
  • Target version set to 1.9.6

Hi Luke - Sorry you're experiencing trouble.

I've spent a while looking at this. Sliders generally work by loading all of the slides into the DOM, and then showing them one at a time, using JS to show/hide sections as relevant. In the case of Make, the slide markup is built in such a way that the slides are visible, and then they are hidden with JS. Because the relevant JS doesn't fire until the DOM is completely built (document.ready), there can be a slight flicker when the page is not loaded from your browser cache.

I assume that the logic behind this decision was that the slider will degrade "gracefully" when JavaScript is disabled. I put "gracefully" in scare quotes because the slides will, in fact, all appear at the same time, one over the other, so that you have to scroll way down to get to the rest of your page content. This is probably the safe route when building a theme for mass consumption - people may put critical site information in those slides, and it's critical that it's seen by those without JS - but in your case it doesn't make a ton of sense.

For your use case, a better solution is probably this: the first slide should be visible by default, while the rest should be hidden by default. The no-js fallback is that only a single slide is visible. I've implemented this right now on the Commons so that you can see what you think.

Even after this change, there was still a flicker, because the banner element doesn't have a height until the images inside of it have been fully loaded; this means that the paragraphs below ("Thank you for visiting the site...") would briefly show up a few hundred pixels higher than they ought to, before flowing into their proper position. Again, this is a byproduct of the fact that Make is a builder theme meant for general use: page sections need to have dynamic height, and need to flow organically. But since we know that your banner elements are always the same height, we can give the parent an explicit height so that the browser doesn't have to redraw after the banner images are loaded. I've added this bit (height: 415px) to your custom CSS

With these two fixes, I'm no longer getting any flicker, but I've also reloaded the page about 600 times, so my eyes are a bit glazed over. Let me know if it's working for you.

Actions #3

Updated by Luke Waltzer over 8 years ago

Thanks so much, Boone! Page loads much more smoothly for me now. You rule. You're also not encouraging me to complain any less with such detailed and effective responsiveness.

Can you say a bit more about the no-js fallback you've implemented? Where on the Commons? I ask so that I can be on the lookout for unintended consequences outside of the Make banner/slider, if that's even a possibility.

Actions #4

Updated by Boone Gorges over 8 years ago

  • Status changed from Reporter Feedback to Resolved

I've put the fix into place, for only, in

Can you say a bit more about the no-js fallback you've implemented? Where on the Commons? I ask so that I can be on the lookout for unintended consequences outside of the Make banner/slider, if that's even a possibility.

The Make slider implementation builds markup like this in PHP:

<div class="slide-1" style="background-image:url('foo.jpg');">foo</div>
<div class="slide-2" style="background-image:url('bar.jpg');">bar</div>
<div class="slide-3" style="background-image:url('baz.jpg');">baz</div>

The three divs, with their background images, load into the DOM when the document is loaded. They are visible. When the document is ready, Make's JS hides all slides (display:none;visibility:hidden) and then shows the proper one (slide-1). (This delay is what caused the flicker.) Thus, if JS is not loaded, you'll see all three slides, one above the other.

My "fix" is to filter the markup so that it looks like this:

<div class="slide-1" style="background-image:url('foo.jpg');">foo</div>
<div class="slide-2" style="background-image:url('bar.jpg');display:none;visibility:hidden;">bar</div>
<div class="slide-3" style="background-image:url('baz.jpg');display:none;visibility:hidden;">baz</div>

If JS is disabled, only the first slide will ever show - there'll be no way to see the content on any other slides.


Also available in: Atom PDF