741 posts
  • Had an item featured on Envato Market
  • Won a Most Wanted contest
  • Has been part of the Envato Community for over 5 years
  • Has sold $40,000+ on Envato Market
+4 more
Orbital_Themes says

Hello guys,

I’m looking for a good jQuery image loader, like, for example, the one used in Kriesi’s CleanCut.

Please let me know where to find such stuff!

738 posts
  • Has collected 10+ items on Envato Market
  • Has been part of the Envato Community for over 5 years
  • Located in United States
  • Sells items exclusively on Envato Market
Jar says

What about just using an animated gif image and then using jQuery to fade that out while fading in the image after it finishes loading? That seems like it would be a pretty simple script. I probably couldn’t make it, but it seems simple lol. :D

629 posts
  • Has been part of the Envato Community for over 4 years
  • Has referred 10+ members
  • Has collected 10+ items on Envato Market
  • Sells items exclusively on Envato Market
+2 more
VagrantRadio says

This is what I do in a round about way.

HTML :
<div id="image_placeholder">
<a href="#"><img src="yourimage" alt="youralt" /></a>
</div>
CSS :
#image_placeholder { 
  background:#000 url(loading.gif) no-repeat 50% 50%;
  width:width;
  height:height;
}
jQuery:
jQuery(document).ready(function() { //hides image and shows background loading image
    jQuery("#image_placeholder a img").css("display", "none");
});
jQuery(window).load(function() { //fades in image and hides loading image
    jQuery("#image_placeholder a img").fadeIn("fast");
});

The delay between the document ready and the window load shows the loading image that is the background behind the image.

741 posts
  • Had an item featured on Envato Market
  • Won a Most Wanted contest
  • Has been part of the Envato Community for over 5 years
  • Has sold $40,000+ on Envato Market
+4 more
Orbital_Themes says

Thanks, I thought about this method too, but I need to call the function that shows images manually, that is not always on page load, but also in portfolio which loads images and post content via AJAX . I checked the jQuery documentation and found, that I can check if the image has been loaded, so I’ve written simple script for this. Now I only need to “upgrade” it to show images one by one with a little bit of delay (something similar to Kriesi’s Clean Cut) and I’ll be good.

I thought that would be much more complicated, that’s why I asked for help. Anyway – thanks for the reply guys!

Have a nice evening! :)

443 posts
  • Has been part of the Envato Community for over 4 years
  • Has sold $1,000+ on Envato Market
  • Has collected 10+ items on Envato Market
  • Sells items exclusively on Envato Market
+1 more
SplitV says

edit: didn’t see your last reply.

629 posts
  • Has been part of the Envato Community for over 4 years
  • Has referred 10+ members
  • Has collected 10+ items on Envato Market
  • Sells items exclusively on Envato Market
+2 more
VagrantRadio says
Thanks, I thought about this method too, but I need to call the function that shows images manually, that is not always on page load, but also in portfolio which loads images and post content via AJAX . I checked the jQuery documentation and found, that I can check if the image has been loaded, so I’ve written simple script for this. Now I only need to “upgrade” it to show images one by one with a little bit of delay (something similar to Kriesi’s Clean Cut) and I’ll be good.

I thought that would be much more complicated, that’s why I asked for help. Anyway – thanks for the reply guys!

Have a nice evening! :)

If you’re doing it with a load function, just use the live() function to call the images.

741 posts
  • Had an item featured on Envato Market
  • Won a Most Wanted contest
  • Has been part of the Envato Community for over 5 years
  • Has sold $40,000+ on Envato Market
+4 more
Orbital_Themes says
If you’re doing it with a load function, just use the live() function to call the images.

That’s not stupid :D Didn’t know that such function existed, will give it a try! Thanks!

629 posts
  • Has been part of the Envato Community for over 4 years
  • Has referred 10+ members
  • Has collected 10+ items on Envato Market
  • Sells items exclusively on Envato Market
+2 more
VagrantRadio says

There’s also a quick-tut on my blog about it or: http://api.jquery.com/live/

707 posts
  • Has referred 10+ members
  • Has sold $10,000+ on Envato Market
  • Has been a beta tester for an Envato feature
  • Has collected 10+ items on Envato Market
+2 more
ChillThemes says

I stumbled across this while looking for jQuery stuff, it should help. link

443 posts
  • Has been part of the Envato Community for over 4 years
  • Has sold $1,000+ on Envato Market
  • Has collected 10+ items on Envato Market
  • Sells items exclusively on Envato Market
+1 more
SplitV says
I stumbled across this while looking for jQuery stuff, it should help. link

That link is providing code that makes use of some horrid javascript practices that you should AVOID . Not to mention the author does not fully even understand what he is doing in JQuery.

by
by
by
by
by
by