[Resuelto] Need to add lazy loader (spinner or white space) to flexslider

[Autor]

Mensajes

[Charles]

Support,

I am using flexslider to display user uploaded images. The slider works great, but is slow to load. The content beneath the flexslider is pushed up into the flexslider's space until the slider has fully loaded, then it pushes the content back down.

Example URL: enlace oculto

Is it possible to have a spinner to show that the slider is loading?

Thanks,
Chuck

[Noman]

Hi Charles,

Thank you for contacting Toolset support. Yes, you can add a spinner before the flex slider loaded.

I am trying to add spinner on this slider and will get back to you with an update: enlace oculto

Thank you for your patience.

[Noman]

I have added the spinner please check here: enlace oculto

- jQuery used for spinner:

jQuery('#flexslider').flexslider({
    animation: "slide",
    controlNav: false,
    animationLoop: false,
    slideshow: false,
    sync: "#carousel",
    start: function() {
            jQuery('#flexslider').find('.loading').hide();
    }  
      });

- Code added in View:

<img class="loading" style="display:block;margin:auto" src="<em><u>enlace oculto</u></em>" alt="Loading...">

Thank you

[Charles]

Looks like the spinner is loading differently for various posts.

These look to be broken: enlace oculto
enlace oculto

These load the spinner to the left, not block: enlace oculto
enlace oculto

Maybe my browser?

Thanks,
Chuck

[Noman]

I noticed that you modified html. I have re-added correct html and now I see spinner is loading Center aligned in all these posts. I see same thing in all posts. Please clear your browser cache and check all these posts again, it should be the cache issue at your end.

Please make sure to copy / backup the original html or code before modifying it, so you can replace it in case of having trouble. Thanks

[Charles]

Thanks and apologies. I've made a backup.

Best,
Chuck