Skip Navigation

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

This thread is resolved. Here is a description of the problem and solution.

Problem:
Add spinner before flexslider is loaded.

Solution:
1. Add this jQuery for spinner:

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

2. Then use this in View or Content Template:

<img class="loading" style="display:block;margin:auto" src="http://www.mywebsite.com/wp-content/uploads/2017/08/gif-load.gif" alt="Loading...">
This support ticket is created 7 years, 3 months ago. There's a good chance that you are reading advice that it now obsolete.

This is the technical support forum for Toolset - a suite of plugins for developing WordPress sites without writing PHP.

Everyone can read this forum, but only Toolset clients can post in it. Toolset support works 6 days per week, 19 hours per day.

Sun Mon Tue Wed Thu Fri Sat
- 12:00 – 17:00 12:00 – 17:00 12:00 – 17:00 12:00 – 17:00 12:00 – 17:00 -
- 18:00 – 21:00 18:00 – 21:00 18:00 – 21:00 18:00 – 21:00 18:00 – 21:00 -

Supporter timezone: Asia/Karachi (GMT+05:00)

This topic contains 5 replies, has 2 voices.

Last updated by Charles 7 years, 3 months ago.

Assisted by: Noman.

Author
Posts
#557106

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: hidden link

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

Thanks,
Chuck

#557134

Noman
Supporter

Languages: English (English )

Timezone: Asia/Karachi (GMT+05:00)

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: hidden link

Thank you for your patience.

#557157

Noman
Supporter

Languages: English (English )

Timezone: Asia/Karachi (GMT+05:00)

I have added the spinner please check here: hidden link

- 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>hidden link</u></em>" alt="Loading...">

Thank you

#557323

Looks like the spinner is loading differently for various posts.

These look to be broken: hidden link
hidden link

These load the spinner to the left, not block: hidden link
hidden link

Maybe my browser?

Thanks,
Chuck

#557358

Noman
Supporter

Languages: English (English )

Timezone: Asia/Karachi (GMT+05:00)

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

#557365

Thanks and apologies. I've made a backup.

Best,
Chuck