How to code a loading screen that disappears after specific images are loaded?

Question

I have a parallax one page scroll, responsive portfolio with many different projects. Every project fires a modal with up to 15 images if the visitor clicks on the project.

I have a loading opening animation with a GIF using JavaScript at the beginning, so the visitor sees the website only when the entire page is loaded, even the images inside of each project that only appear when user clicks on the project (it is a one page scroll):

$(window).load(function() { 
    $(".loader").fadeOut("slow");
})

It currently takes between 30 seconds to 1 minute to access the portfolio due to the numerous images

Does someone know a way to: - load some images first (backgrounds of the main page, thumbnails for each project, etc) - keep the loading screen at the beginning only when these images are loading - have the loading opening screen disappearing when these images are loaded so the visitor can start browsing the portfolio and so doesn't have to wait 30 seconds for that - keep loading the other images when he is browsing the page (so now loading the images that appear inside of the modal only when the visitor clicks on a project while he is visiting the "main" page)

Thank you for your help!

score 1 · Answer 1 · answered Sep 07 '14 at 04:08

The img tag has load event. You coluld take control of them, for example consider your images have class .preloaded-image, we make a flag for each one to know which item is loaded. We'll add a class, like image-loaded to each one, when the loading of image has finished:

$('.preloaded-image').on('load', function () {
    // set the flag
    $(this).addClass('image-loaded');

    // run the callback
    showPage();
});

function showPage() {
    // we check for all images
    // if all images has loaded
    // we'll show the page
    var items = $('.preloaded-image').length;
    var loaded = $('.image-loaded').length;

    // if items and loaded are equal
    // all images has loaded
    if (items != loaded) {
        // do nothing as all images hasn't loaded yet
        return;
    }

    // all images has loaded
    // show the page
    alert('I will show the page');
}

How to code a loading screen that disappears after specific images are loaded?

1 Answers1