bxSlider won't load loading animation (bx_loader.gif) before the slide-images

javascript jquery css bxslider
Wahooka picture Wahooka · Feb 2, 2014 · Viewed 8.2k times · Source

I recently installed the bxSlider on my homepage and most of the code worked fine after the JavaScript/CSS configuration, except the loading animation (a tiny circling wheel, *bx_loader.gif*). Then I discovered - with the help of some geeky friends - that the loading .gif is always loaded after the images of the bxSlide. It can't show up with this loading order, so I tried some workarounds, like a base64 encoded loading .gif in the stylesheet and (what you can see now on my mentioned homepage) a "preloading image":

<img src="./Karussell/BXSlider/images/bx_loader2.gif" width="1px" height="1px" />

It works now (you see the loading animation) - but it's not very elegant.

So I got some questions:

  • Is there any other "clean" method (beside the described preloading tricks/hacks) to ensure, that the loading .gif is loaded before the bxSlide?
  • Did anybody encounter similar problems with bxSlider? The demo-pages on the bxSlider-hompage work flawlessly...
  • Could anybody look into the bxSlider-JavaScript and tell me, if the loading order could be changed via JavaScript/JQuery (I'm not that JS-professional), please?

Thanks in advance!

Wahooka

Answer

Dan1121 picture Dan1121 · Feb 12, 2014

you can sort of hack the preloading of the gif.

just place <img src="path/to/image.gif" class="versteck"> anywhere in your <body> tag. What happens here is the image is loaded just before the javascript (scripts, jquery, jquery plugins,etc) are loaded, therefore when the bxslider fires up, your preloading image is loaded already.

you can also use javascript and css background to preload images, but this is the fastest one imho.

Related questions

Bxslider border issue

Trying to properly align the bxslider border so that it fits my images. I've tried with many number of different images, with the bxslider at different setttings. The Bxslider will in fact fit the images if I remove the options "…

Read More
Advanced Captions with bxslider

This question has already been asked, but has no answer - I believe because not enough information was provided. I am using the bxslider as my template. See here: http://bxslider.com/examples/image-slideshow-captions I can create a very simply …

Read More
window resize with bxslider destroyed breaks style

I'm trying to remove the styling and javascript of a bxslider element when the browser window shrinks to a certain size and apply a different style to the list, but it's doing weird things. Scaling up from below 502px, everything …

Read More