Adding loading screen

[iamRDM]

Hello, i need help in adding loading screen to my website.
Because my website contains a lot of images and take some time to load.
So I’m thinking about adding a Loading screen. But I don’t know how to do it.
Any help will be very grateful :)

[Kitty Giraudel]

Have you thought about optimizing loading time before adding a loading screen?

[iamRDM]

i want to add loading screen because the main page is having like 10 images
each image is of size approx 3MB -_-

[Kitty Giraudel]

What about compressing images? Using a 3Mb image on the web is silly. Using 10 is 10 times sillier.

[iamRDM]

Its a photography website, even i think its silly but the client want it this way -_-

[iamRDM]

Help me how to add a loading screen

[Kitty Giraudel]

No. The client wants his photographs to look great, as they look on his reflex. This is totally understandable.

So he gives you large / HQ pictures (to you or an admin interface), they you (or the AI) have to compress / resize these pictures so they look great without overloading the page.

Did you set up a resizing / compressing system?

Then if once pictures are resized/compressed the page is still heavy, you should rely on AJAX loading instead of a loading screen.

[iamRDM]

Any guide to “How to use AJAX loading” ?

[pixelgrid]

firstly optimizing your images can help on speed and bandwith.
you can find even free programs which optimize images for web usage ,

then you will have to read about image asynchronous loading .
this is a good article http://perishablepress.com/3-ways-preload-images-css-javascript-ajax/,
if the images are taking the whole page and the next one is revealed though scrolling maybe even infinite scroll would fit your needs(http://www.infinite-scroll.com/)

[JayJay141]

I agree with @HugoGiraudel the server can do so much, Compressing a images should be every web developer priority, all you have to do on your CSS is work on your dimension give it a max-height and a max-width so when you displayed your image on the browser it wont stretch the image but fit the image appropriately.

here check out this link I found hopefully this may help.

http://stackoverflow.com/questions/3642541/max-width-and-max-height-for-scaling-images-in-internet-explorer

[iamRDM]

Now i think you guys are right. I must drop the idea of ajax loading.
Thanks for your help guys :)

[Author]

Posts