bxslider-4 icon indicating copy to clipboard operation
bxslider-4 copied to clipboard

Very slow when more than one slider on a page, and images are blinking when slider loads.

Open tylik1 opened this issue 11 years ago • 2 comments

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

tylik1 avatar Sep 20 '13 23:09 tylik1

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 });

tylik1 avatar Sep 21 '13 00:09 tylik1

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.

YehuditGrinwald avatar Feb 25 '19 11:02 YehuditGrinwald