Discussion on jQuery IMG Preloaders

Discussion on jQuery IMG Preloaders

Cart 137 sales

Lukasz_Czerwinski supports this item


27 comments found.

Ok. I sorted it out. Centered photos.

1. In preloader_Develop.js I changed:

//Link CSS
        "display": "block",
        "width": 1000,            
        "text-align": "center",            
        "z-index": 10
//Set sizes
    height    : (settings.Height) ? settings.Height : thisImage.attr("height")+2,
    width    : (settings.Width) ? thisImage.attr("Width", settings.Width) : thisImage.attr("width", thisImage.attr("width")),

2. in css .preloader { position:relative; text-align:center; } and removed #ffffff from preloader style

3. in HTML – a href=”#” replace to “a”

That’s it!

Hi Lukasz,

thx for great script, I have photos with defferent width, so I setup width: 0 that’s fine, but the problem is that I would like to get photos CENTERED . What I mean. My DIV is 1000px, ma photos around 600-800 and they have to stay centered. I tried to modify you script a little bit: box.css({“display”: “block”, “width”: 1000, “text-align”: “center”, “z-index”: 10 });

So now photos are fine CENTERED but the problem is that preloader starts from left side, and is not centered from the beginning.

Any help ?

Just bought this, trying to use it in a dynamic enviorment where the image sizes change. No luck, the “auto image size” doesnt work.

Please contact me via mail. I’ll help you ;)

I tested your demo with FireBug (firefox extension) and i found that you have 404 errors in your plugin. Thats maybe the reason that its so slow.


Sorry for long wait time for my reply. I also tested the script with FireBug, but I don’t found any errors. So, please send me a screenshot with errors.

Thanks. Lukasz

So is display none enough to stop the image from loading ?

If not specifying the image width and height, the preloader makes the .preloader div exactly ten times big as the image really is. Is this known?

Best regards, indiapart.


Sorry for long wait time for my reply.. Thank you for this information, I’ll try to make updates for this script..

Cheers, Lukasz

This makes a site really slow / choppy to scroll on if you load too many images..Is this just me?

does this actually work like lazyload?


Sorry for long wait time for my reply.. Yes, the script work like lazyload

Cheers, Lukasz

Just open your LIVE PREVIEW demo on IE9 , it doesnt display properly, the image height was so it looks weird.

Hi Jonathan

Sorry for long time wait for my reply. If you want to use the script in IE9 – please update the jQuery to new version (1.6.1).

Hi Jonathan

Sorry for long time wait for my reply. If you want to use the script in IE9 – please update the jQuery to new version (1.6.1).

STILL doesnt work properly on IE9

Hi Jonathan,

Could you give me more informations about the issues?

Thanks ;)

Actually the number of preloaders that the plugin comes with is more than enough, and they are all awesome. Maybe I’ve failed to communicate my idea, so therefore I apologize.

My suggestion was to add an option to load images one at a time, so basically in a sequential order. For instance if you have 5 images, you show the preloader image (what ever style you choose) for all 5, and you fadein one at a time. I hope that this makes sence. Take alook here for example:

Thanks again for a great plugin.

PS: I’m using this plugin on Drupal as well, so making it work with jQuery 1.3.x is a plus, because it’s a pain to upgrade jQuery in Drupal as it breaks everything. jQyery in Drupal 7 can be upgraded to 1.6, but that’s a different story, as Drupal 7 is missing allot of the modules that most of us need.

Thanks for the explanation and your idea. It’s great. ;)

I just bought this and I like it. It would be awesome if you could add sequential pre-loading to the plugin.

Next updates will be have more preloaders. Thanks for good idea! ;)

P.S: You can add preloaders yourself via CSS alone :)

Hi Lukasz,

Great job on this preloader. I do have one question though:

I’d like to be able to make the images in the gallery resize (similar to what you would get using

img { width: 100%; max-width: 100%; display: block; }

Suggestions on what to do to make this work?

Hi again!

Sorry for long time wait for my reply. Please, try in this way: Don’t set size for images via script settings, so
and your CSS code:
img {width: 100%; max-width: 100%; display: block; }
If this way will don’t work please contact me :)

Thanks a lot for your help Lukasz, but still no luck :( Any other ideas?


Please send me a mail via CodeCanyon. I’ll try to help you :)

Also another small issue we’re experiencing is a flash of the image before it actually loads. Thoughts?

Hmm.. Could you give more informations about the problem?


If you’d like I’d be more then happy to help beta test your next release. We’re rolling our update out likely in the next 48 hours, so if you have anything ready let me know :).

Great preloader, we’re going to roll it out in our production build of our application and very excited. We do however have one small issue, it doesn’t work in IE. I’m thinking minor CSS or possibly jQuery conflict somewhere, but not sure with what.

Any thoughts or ideas for debugging?

I see that its compatible with IE6 , so obviously the issue is with our code.

Thanks for any help or ideas.


Hello Carm

I’ll try to make updates to the script in this month. If you couldn’t wait, please send me a mail from CodeCanyon. :)

am using a ajax form to generate an image

the form posts to a php file

and the php file returns the generated image

i was hoping the script would kick in whilst it was waiting for the image to be generated… but it doesnt

can this be modified to do such a thing?



Please send me a mail from CodeCanyon. I’ll try help you. :)

Doesn’t seem to work in IE8 .

Could you describe the problem? because I don’t see any problems in IE8 .


The images would appear for a second then disappear. The area was blank. It worked fine in Firefox and Chrome. I set the plugin to determine the size of the images automatically. Could that be my issue?

In the meantime, I’ll double-check my code as well as check with my site developer for any possible conflicts that he may know. If I find an issue you and your users need to know about, I’ll let you know.


You can hide the images via CSS . So, for example:
.container img {
   display: none;

If the way doesn’t help, please send me a mail from CodeCanyon.

Found a bug, When you wrap the IMAGE on an Link does’nt work on IE7 ,

Any fix?

If you can’t wait for official updates. Please send me a message from CodeCanyon :)

The code you sent me on my email doesnt work on IE9

Hi Jonathan

I will make updates for the script on this month. Sorry for problems Jonathan.


Tell us what you think!

We'd like to ask you a few questions to help improve CodeCanyon.

Sure, take me to the survey