I'm getting a flash of the slides loading vertically only on an iphone due probably to its loading speed in general and my css configuration - on desktops its not visible. I ve looked at various display and visibility tricks to hide the player before loading but my javascript knowledge is lousy so I cant apply it correctly within this drupal modules situation.
Standalone bxslider techniques are on this page
http://stackoverflow.com/questions/11658605/how-to-get-bxslider-to-hide-the-slides-until-the-page-loads

One solution pointed to doing the following
do this:

j('.bxslider').show().bxSlider({
   mode: 'fade',
   pagerType:'short',
   preloadImages:'visible',
   auto:'true'
});

In your html add:

<div class="bxslider" style="display:none">

So all i'm after is some pointers as to how and where i should apply this to I'm guessing bxslider_views_slideshow.js but I dont know how?
Thanks

Comments

Mschudders’s picture

Mschudders CreditAttribution: Mschudders commented

Maybe an easy way is to

  1. enable css compression and js.
  2. Cache your pages.
  3. Enable boost.

This will speed up the process in general.

What you can do is maybe, via css force it to be displayed as "display: none" in the beginning,(As you state above.) and then via JS after like 1-2 seconds add the slider.
: http://www.w3schools.com/jsref/met_win_settimeout.asp

So in css "#DIVNAMEOFYOURSLIDER { display: none; }
And then in JS (non working example.):

document.ready{
$('#THEDIV').show();
}

Or load it via Ajax.

Mschudders’s picture

Mschudders CreditAttribution: Mschudders commented

Do you have a preview of the site, which I can access ?

Then I could have a quick look.

Stephen_WTD’s picture

Stephen_WTD CreditAttribution: Stephen_WTD commented

Ok thanks Mschudders I think I eventually have it working with your suggested technique but using visibility - display would not work - the javascript would not return the div and contents on page load but with visibility visible it is.
I had tested visibility previously but I must have not applied it correctly.
Note this flash was only happening on an iphone when pressing the back button not on initial page loads on desktops or iphone.

.view-slider {
    visibility:hidden;  
}
$(document).ready(function () {
    // to prevent flash of unstyled content
    // use css visibility property
    $(".view-slider").css("visibility", "visible");
});
Stephen_WTD’s picture

Stephen_WTD CreditAttribution: Stephen_WTD commented
Status: Active » Closed (fixed)
mstef’s picture

mstef CreditAttribution: mstef commented

I'm getting this on my desktop.. it's annoying.

Stephen_WTD’s picture

Stephen_WTD CreditAttribution: Stephen_WTD commented

Mstef did you try what I did to help hide it? the concept is the same for any device/browser

mstef’s picture

mstef CreditAttribution: mstef commented

Yes. While the sliders are not visible, the main region of the site is still pushed down to the bottom where the sliders would normally be; until it loads then becomes visible. So, it's the same effect, except the sliders are not there; still very annoying.

display:none; seems to break everything.

Stephen_WTD’s picture

Stephen_WTD CreditAttribution: Stephen_WTD commented

Mine was pushing the main region down also until I hid the view slider - displaying none on any containers caused the slideshow not to load at all.
So you have vis hidden on .view-slider and its still pushing the main down.
Do you have a fixed height sometimes a set height with display hidden has worked for others - but I have height auto so that didnt work for me.