Grow your CSS skills. Land your dream job.

Adding loading screen

  • # April 8, 2013 at 5:11 am

    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 :)

    # April 8, 2013 at 5:34 am

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

    # April 8, 2013 at 6:09 am

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

    # April 8, 2013 at 6:10 am

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

    # April 8, 2013 at 6:13 am

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

    # April 8, 2013 at 6:14 am

    Help me how to add a loading screen

    # April 8, 2013 at 6:22 am

    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.

    # April 8, 2013 at 6:57 am

    Any guide to “How to use AJAX loading” ?

    # April 8, 2013 at 7:05 am

    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/)

    # April 8, 2013 at 8:25 am

    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

    # April 8, 2013 at 8:30 am

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

Viewing 11 posts - 1 through 11 (of 11 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".