StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<p>The solution I use from this is have two layers of elements. </p> <p>One layer is a case that has the background loading symbol as the background. This is always seen. Then in a second layer above, I place the element with the images and use a jQuery <code>.ready()</code> function with a <code>.delay()</code> and <code>.fade()</code>. </p> <p>Because this is convoluted to explain, I'll show what I do:</p> <pre><code>  <div id="background-loading"> // Background image of spinner <div id="slider-case"> // Container of slider <ul id="slider-content"> <li class="slider-image"></li> <li class="slider-image"></li> <li class="slider-image"></li> </ul> </div> </div>  // Somewhere you have a script that manages the slider // Below is the loading animation/image manager $(document).ready(function() { $('#slider-content').delay(200).animate({opacity:1.0}, 'linear', function(){ $('#background-loading').animate({opacity:0, 'margin-left':'-70px'}, 'linear'); $('.slider-image').animate({opacity:1.0, 'margin-left':'0em'}, 'linear', function(){}); }); }); </code></pre> <p>The delay and fade makes the loading time seem intentional, while the <code>.ready()</code> will wait until the element is completely loaded. </p> <p>By having a separate background layer, you don't have to worry about manipulating anything in addition to the slider. To add an additional effect, you can make a callback to the image load that does a fade to the loading animation.</p>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload