bxslider-4
bxslider-4 copied to clipboard
Very slow when more than one slider on a page, and images are blinking when slider loads.
Hi I'm running 3 sliders on one page and it seems to be very slow on Google Chrome. Also images are blinking after the slider is loaded. I digged up the code and saw that image blinking is associtaed with adding timestamp to images source attribute. I also noticed that you don't cache many variables. You are using $(this) several times instead of saving it to a variable, which is much faster. var $this = $(this);
Nevertheless a good slider, especially responsive part of it
The slowness of the sliders was due to waiting when all images finish loading. The fix was simple. I added option in defaults object, which prevented the check for all images being loaded.
imageWait: false
I also replaced the code if (total == 0){ callback(); return; }
with
if (total == 0 || slider.settings.imageWait == false){ callback(); return; }
Now The slider won't wait for images loading which is fine for me, as I have many blocks with prducts on e-commerce website. Sliders load fast and no blinking can be seen.
If you need to wait while all images finished loading you can manually call imageWait : true like so
$('.bxslider).bxSlider({ imageWait : true });
Bx-slider speed is the speed of the images 'moving'. Images are moving in a loop. When the images have 'long way' (-high height in the vertical slider and wide width in the horizontal slider) we need to increase speed.
My issue was: I had tow slider bars on the same page, one horizontal and one vertical. The horizontal slider was slower because his width was bigger than the vertical sidebar.
My fix was: to set the slider bar speed according to the size of the div that wrapper the slider.