741 posts
  • Has been a member for 5-6 years
  • Sold between 50 000 and 100 000 dollars
  • Exclusive Author
  • Most Wanted Bounty Winner
  • Bought between 50 and 99 items
  • Poland
  • Referred between 10 and 49 users
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 been a member for 5-6 years
  • United States
  • Bought between 10 and 49 items
  • Exclusive Author
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
  • Bought between 10 and 49 items
  • Exclusive Author
  • Has been a member for 4-5 years
  • Referred between 10 and 49 users
  • Repeatedly Helped protect Envato Marketplaces against copyright violations
  • United States
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
  • Has been a member for 5-6 years
  • Sold between 50 000 and 100 000 dollars
  • Exclusive Author
  • Most Wanted Bounty Winner
  • Bought between 50 and 99 items
  • Poland
  • Referred between 10 and 49 users
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
  • Bought between 10 and 49 items
  • Exclusive Author
  • Has been a member for 4-5 years
  • Sold between 1 000 and 5 000 dollars
  • United States
SplitV says

edit: didn’t see your last reply.

629 posts
  • Bought between 10 and 49 items
  • Exclusive Author
  • Has been a member for 4-5 years
  • Referred between 10 and 49 users
  • Repeatedly Helped protect Envato Marketplaces against copyright violations
  • United States
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
  • Has been a member for 5-6 years
  • Sold between 50 000 and 100 000 dollars
  • Exclusive Author
  • Most Wanted Bounty Winner
  • Bought between 50 and 99 items
  • Poland
  • Referred between 10 and 49 users
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
  • Bought between 10 and 49 items
  • Exclusive Author
  • Has been a member for 4-5 years
  • Referred between 10 and 49 users
  • Repeatedly Helped protect Envato Marketplaces against copyright violations
  • United States
VagrantRadio says

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

707 posts
  • Sold between 10 000 and 50 000 dollars
  • Referred between 10 and 49 users
  • Bought between 10 and 49 items
  • Has been a member for 5-6 years
  • Exclusive Author
  • Microlancer Beta Tester
ChillThemes says

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

443 posts
  • Bought between 10 and 49 items
  • Exclusive Author
  • Has been a member for 4-5 years
  • Sold between 1 000 and 5 000 dollars
  • United States
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