Support » Plugins and Hacks » Meteor Slides » [Plugin: Meteor Slides] Add loading icon?

[Plugin: Meteor Slides] Add loading icon?

  • Hi Josh,

    First I just need to thank you for creating such an awesome plugin – out of all the gallery plugins I’ve used for various WordPress websites yours is by far the most intuitive and functional!

    I have a relatively big image gallery that will contain about 50 high-resolution images, and as a result the first few images will not load completely before the subsequent images are loaded – i.e. the first image would load to about 50% before fading into the next image, and so on. What’s worst is that the gallery is in the center of the home page, and so before it is done loading the footer of the website would not load at all… 🙁

    I was wondering if there is a way to implement a loading function with a loading gif (something simple like found here http://ajaxload.info) so that the gallery can load all its images in the background while the rest of the website loads; then the gallery would start displaying all its images after all the images are done loading?

    Any input from you would be highly appreciated! Thank you so much for your support in this forum 🙂



Viewing 12 replies - 1 through 12 (of 12 total)
  • Plugin Author Josh Leuze


    Hi Kayla, you’re welcome, thanks for trying my plugin!

    One option might be to load a few images first and dynamically load the rest in the background. The jQuery Cycle plugin supports this, here are a few examples:

    I haven’t tried adding a loader, preloading images, or dynamically loading images, so I will have to experiment a bit and see what I can come up with.

    Thank you so much for the response Josh!

    Unfortunately those two links are a bit over my head, but I will try to play with them and see if anything comes up.

    If you can come up with anything that would be super great! 🙂

    Plugin Author Josh Leuze


    I’ll let you know what I can figure out!

    Has there been any update on this? I too would like to load my images in the background….

    Plugin Author Josh Leuze


    @terryago No, I haven’t had a chance yet, but I’ll try to dig into it soon!

    @jleuze Thanks. Great plugin!

    Plugin Author Josh Leuze


    I’ll keep you posted.

    Hi Josh,

    If there are any updates that would be awesome! I know you’re really busy, so I am very grateful for your attention on this matter 🙂

    I just realized that Nivo slider uses it if I hard-code it using HTML and reference the scripts externally, but not the Nivo Slider plugin for WordPress 🙁 I tried looking into their scripts to see what’s creating the preloading function but alas it’s all way over my head.

    I think I’ve got it!

    I’ve been studying this tut – http://net.tutsplus.com/tutorials/javascript-ajax/how-to-create-an-awesome-image-preloader/

    We would need both the jquery-1.4.3.min.js and jquery.preloader.js files and reference them in a file like header.php in the theme directory

    The only problem is there is a jQuery conflict with WordPress inside the jquery.preloader.js file, so I simply stated

    var $j = jQuery.noConflict();

    and replaced all $ signs with $j.

    Around line 71 where it says

    var icon = jQuery("<img />",{

    must become

    var icon = $j("<img />",{

    as well. In this spot the loading icon is referenced but I didn’t find it necessary so I just used the CSS method below.

    Then, make sure to call the function, which in my case is in my theme folder’s header.php file:

    <script type="text/javascript">

    Lastly, just set up the preloader class with a loading gif image – get one from http://ajaxload.info if you don’t have one; something like this in the css file:

    .preloader {
       background:url(loading.gif) center center no-repeat #ffffff;

    The preloader must be set to display:block or display:inline-block otherwise the loading icon won’t display

    And that’s it! Now all the images inside my meteor slideshows (I have 8 on my webpage) preloads with the loading icon first 🙂

    Josh – I know you can integrate this 10 thousand times better than I have, and if you do I will be forever grateful! For now I will make do with this hack 😉 I have tested it and it works in Opera, Safari (PC, Mac, and iPhone/iPads), Firefox, Chrome, and IE 9, 8, and 7 – I don’t have 6 installed nor do I have a desire to 😉


    Plugin Author Josh Leuze


    That’s awesome Kayla, thanks for sharing! I’ll check it out and see what I can do with it.

    Hi Josh,

    Thank you very much for your time.

    Unfortunately my method doesn’t seem to work on a gallery with over 50 images in it, so I don’t think it’s doing what I think it’s doing 🙁


    Plugin Author Josh Leuze


    Yeah, depending on the file size, more than 50 images is going to be pushing it.

Viewing 12 replies - 1 through 12 (of 12 total)
  • The topic ‘[Plugin: Meteor Slides] Add loading icon?’ is closed to new replies.