Member Avatar for greenglow

We're working on finishing this website on our staging server.
http://alias-dev.com/bidwelladvisors/
We're using Moo Tools BySlide accordion menu
http://www.byscripts.info/scripts/javascript-dynamic-accordion-menu

On initial page load the slider comes in slowly and one sees theb different elements separated in a column. Afterwords it is fine.
Anyone have any advice on how to make this load cleanly?
otherwise it's working quite well.
Thanks,
Dan

  • 3 Contributors
  • 3 Replies
  • 121 Views
  • 6 Days Discussion Span
  • Latest Post Latest Post by greenglow

Dani AI

Generated

Brief diagnosis and focused fixes: the accordion is visibly stacked because the plugin is initializing and animating from the browser’s default flow before final sizes/styles (images, computed widths) are ready. That’s why sees the column briefly. is right that nothing can be shown before the browser paints, and ’s image-preload idea helps — but the most reliable approaches are to prevent the unstyled state from being visible and to initialize the plugin after resources are ready.

Practical steps to try (do not repeat the preloader script already posted):

  • Keep the accordion hidden until the script has finished layout calculations. Add a lightweight CSS class that suppresses visibility/animation, then remove it after initialization (best on the load event if images matter).
  • Disable CSS transitions until after initialization so nothing animates from the stacked state.
  • Give images and panels explicit width/height or a fixed container height to avoid layout jumps while resources load.
  • Provide a simple noscript fallback so non-JS users still get usable content.

Example pattern (replace IDs/classes for the project):

/* keep it off-screen/unstyled while JS prepares layout */
#accordion.js-hidden { visibility: hidden; }

/* disable transitions until ready */
#accordion.no-trans * { transition: none !important; }
// wait until resources are ready, then init and reveal
window.addEventListener('load', function () {
  // init BySlide here (call plugin init inside this handler)
  var a = document.getElementById('accordion');
  a.classList.remove('js-hidden', 'no-trans');
});

Additional notes: explicitly sizing images or panels avoids reflow; inlining the "hide until ready" CSS in the page head prevents a flash of unstyled content; test with throttled network and different browsers to reproduce the problem reliably. For details on load vs DOMContentLoaded and avoiding layout shifts, see the MDN docs on the window load event and guidance on layout-shift prevention (MDN load event, ).

Recommended Answers

All 3 Replies

Member Avatar for MidiMagic

You really can't control what the page looks like until it finishes loading.

Member Avatar for PopeJareth

You really can't control what the page looks like until it finishes loading.

You can use a javascript in the header to cache the images before the page starts to display.

<SCRIPT LANGUAGE="JavaScript">
<!-- hide from non JavaScript Browsers

Image1= new Image(50,60)
Image1.src = "thing.gif"

Image2 = new Image(70,80)
Image2.src = "thing2.gif"

Image3 = new Image(90,100)
Image3.src = "thing3.gif"

// End Hiding -->
</SCRIPT>
Member Avatar for greenglow

You can use a javascript in the header to cache the images before the page starts to display.

<SCRIPT LANGUAGE="JavaScript">
<!-- hide from non JavaScript Browsers

Image1= new Image(50,60)
Image1.src = "thing.gif"

Image2 = new Image(70,80)
Image2.src = "thing2.gif"

Image3 = new Image(90,100)
Image3.src = "thing3.gif"

// End Hiding -->
</SCRIPT>

We'll try this. It was very kind to include the code-thanks!

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.