[Plugin: Meteor Slides] Add loading icon?

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:
https://jquery.malsup.com/cycle/add3.html
https://jquery.malsup.com/cycle/add4.html

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! ??

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….

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

@jleuze Thanks. Great plugin!

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 – https://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">
jQuery(function($){
	$("div.meteor-slides").preloader();
	});
</script>

Lastly, just set up the preloader class with a loading gif image – get one from https://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;
   display:block;
}

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 ??

Best,
Kayla

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 ??

Kayla

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