Question

I’m using Nivo Slider Nivo Slider as an Image Carousel. However, I needed to embed a powerpoint presentation, so I converted all slides to JPG images totaling about 3.5 MB. Now it takes a while for all the images to load. But while loading, the containing div area is totally empty and shows the page background.

My questions is whether I can show some sort of loading indicator while all 36 images are loading. Another option that might be possible is to do lazy loading of images so that only the first image is loaded, and when user clicks the next arrow to go to the next image, it loads and so forth. Are either of these options possible ?

EDIT: In response to the comment below – images are loaded with static img tags

Answer 1

$(window).load(function() { 
    //all resources including external are loaded
    //remove loading messages and fadein presentation
    }); 

$('#presentation img').load(function(){
    //track individual image load
    //you can keep a gloabl count and increment as each image load is triggered
    });

For lazy loading:

Keep image locations as Json, then create image elements on the go and append to presentation.

EDIT

Above mentioned is the general approach, but for nivo slider it looks like they already have loading indicators and stuff, what else are you looking for? id you miss to add loading image?

Explanation:

When the assosiated html page is completely loaded to browser and corresponding DOM is created, DOM ready event occurs, at this time external resourses like images may not be fullt loaded.

When all the resources including images are loaded and page is ready to be rendered window load event occurs.

In nivo slider they use this style:

.theme-default .nivoSlider img {
    display: none;
    left: 0;
    position: absolute;
    top: 0;
}

So images are not loaded by default by modern browsers as its display is none. window.load will be triggered before all images are actually loaded(they are not required to show page as they are hidden)