Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

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

like image 285
Wahooka Avatar asked Dec 06 '25 10:12

Wahooka


1 Answers

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.

like image 135
Dan1121 Avatar answered Dec 08 '25 00:12

Dan1121



Donate For Us

If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!