All geek questions in one place

How to preload images for the image slider on the Foundation platform?

Using Zurb Foundation 4.1.5 (latest version), the orbit image slider works great. Unfortunately, it does look valid for the first two seconds when all the images appear as a giant bulleted list. Then javascript is launched and it is all beautiful.

How to avoid initial deformity? Can I preload images? Can I have everything with display: none or visibility: hidden until it's ready?

+6
source share
1 answer

Per Foundation Documentation

We've cleaned up how Orbit initializes by adding a wrapper function that stops the ugly flash of uneven content. Here the markup is necessary:

To add a preloader, simply include the div class = "right preloader inside the wrapper, for example:

 <div class="slideshow-wrapper"> <div class="preloader"></div> <ul data-orbit> <!-- Orbit slides --> </ul> </div>

Update checked: Tested with Foundation 4.2.1 http://foundation.zurb.com/download.php

Used by Fiddler for throttle download speed http://fiddler2.com/

+5
source

Source: https://habr.com/ru/post/944794/

More articles:


All Articles