I have this slider on my website:
http://css-tricks.com/examples/AnythingSlider/
It works fine, but I don't like the way it loads (you can see list of the images with list dots before it is ready).
Is there a universal way of bypassing that? How to load the slider in the background so users don't see it UNTIL it's fully loaded (while it loads in the background I could display preloader.gif for example).
I was thinking about opacity: 0 & fading it after the s开发者_开发问答lider in DOM, but maybe there's other way?
I tend to use the following pattern:
// assumes slider is hidden
var imgCount = $("#slider img").length;
var loadCount = 0;
$("#slider img").one("load", function() {
loadCount++;
if(loadCount === imgCount) {
// show slider once all images have loaded
showSlider();
}
}).each(function() {
if(this.complete) $(this).trigger("load");
});
I would say apply css
.anythingSlider
{
display:none;
}
and then change it with jQuery after the slider is loaded.
精彩评论