Ninja Slider / Posts /

Reduce the flickering caused by loading the slider image

1
I'm really happy with your Ninja slider. We are just about ready to go live with the slider. There is a minor issue I am noticing with my implementation.
 
On the initial page load I see the loading bar for a second and then there is also a jumbling of a bunch of the other elements. I am wondering if there is a way to "pre-load" the slider or the images to avoid seeing this.
Lan  9 years ago   viewed: 19258    

2 Answers

0

Hi Lan,

The slider starts running when "onDomReady". Before the first image is fully loaded the slider will display the loading bar.

I think the following two CSS configurations may make the loading bar less noticeable.

1.
#ninja-slider { .... visibility:hidden; }
2. In the CSS you will find:
#ninja-slider div.preload { background: black url(img/loading.gif) no-repeat center center; }

Change the black color to white so that it is consistent with your page style(white background), and you can even remove the background image if you dislike it.

Milo   9 years ago
1

Thanks so much for taking the time to look. I did as you suggested and the result is much better, I realized after that my main issue was that the content pieces below the slider load higher in the page until the images load and then those pieces snap down when the slider finishes loading.

What I also did was force the min-height of the div to the height of the slider images to keep the non-slider content in their initial position and now you don’t see it snap down. I added everything you suggested plus this.

@media only screen and (min-width: 960px) { #ninja-slider { ...... height: 100%; //preserved for responsive min-height:1629px; //height of slider images } }

I also ended up removing the loading gif as well. It looks great, we may launch today. Thanks again for taking the time to respond. I really appreciate it. I was on a 12 hour spree yesterday and my brain was getting foggy :)

Lan   9 years ago

   

Your name*
Password
(Optional. Used to modify this post afterwords)
+ =  

Ask your Own Question

  • If your question is related to the topic of this post, you can post your question to this page by clicking the "Post a reply" button at left;

  • When you want to start a new page for your question:
▲