Load images from array, load only 2-3 images at startup (deferred or lazy load)?

[napishu]

Hello!

I have Smooth-Div-Scroll in my header. High resolution pictures and a lot of them (> 20). And their number is growing. First problem that when we have a lot of images - your script is waiting for loading images and then show slider. It would be good to show the loader and then show our slider (I did it) , but this does not solve the main problem, only cosmetics for users.

I want not immediately load all the images and do not load the user's network. And for example, for devices with small screens Smooth-Div-Scroll is not shown, loading all html markup with images is not correct here! So first wee need some deferred function to load our images. I think it is very important with such scripts because it is not a simple slider, and it's great for more number of images and the sizes.

We know height and width of images.

Questions.

1. Does it possible fetch images from javascript inline array (not from html dom img tags)?

For example

array = [
        {
            link: "http://google.com",
            image :"http://localhost/upload/image01.jpg",
                        width: "900",
                       height: "200"
        },
        {
            link: "http://google.com",
            image :"http://localhost/upload/image02.jpg",
                        width: "1000",
                       height: "200"
        }
 ]

2. Deferred loading images? For example, on Smooth-Div-Scroll start load only 2 images, when scroll going to 2nd image (when 1nd image has reached its half scroll) - load next 2 images (3 & 4) in background etc... We can assume the total images width from javascript array If your plugin needs this counting.

I think you understand what I mean.

Thank you