Images very slow when opening page first time - how to load images

Question

I have a page where the landing page has images that change in time (on by one the images change). That works fine, but when uploading the site, I realised that my images at the landing page load very slowly and therefore it does not look good. Once all loaded (all appeared at least once) then page is good again and the transitions smooth and nice.

I was thinkin of a way to preload the images. I found many stuff and tried the following:

           $(window).load(function() {

               $(".loader").fadeOut("slow");    /*gif that shows when page loads*/

               function backgrounds() {
                    for (i = 0; i < preload.arguments.length; i++) {
                        images[i] = new Image()
                        images[i].src = preload.arguments[i]
                    }
                }

           })

                var backgrounds = new Array(
                    'url(Images/image_1.jpg)'
                  , 'url(Images/image_2.jpg)'
                );

      $(document).ready(function(){
           /*I have here other functions as well as the function that changes the images one by one*/
      });

No success. When loading page first time I have the exact same problem. The photos the first time load extremely slowly and also the change function of the photos starts before they even have time to load (have way of the loading the function that rotates the pics comes in and makes a change).

As I am newbie to all this, could anyone please help with what is the best way to tackle the problem, and make sure that the loading is done first.

Many thanks

Answer 1

I think you should not use javascript to preload images, since there's a better solution with CSS3 . This is compatible with recent browsers.

https://perishablepress.com/preload-images-css3/

For example:

.preload-images {
    background: url(image-01.png) no-repeat -9999px -9999px;
    background: url(image-01.png) no-repeat -9999px -9999px,
        url(image-02.png) no-repeat -9999px -9999px,
        url(image-03.png) no-repeat -9999px -9999px,
        url(image-04.png) no-repeat -9999px -9999px,
        url(image-05.png) no-repeat -9999px -9999px;
}

Answer 2

You can create a new image object in the namespace with the necessary file, which will then be found by the browser when it's time to look for the image. Like this:

(new Image()).src = "yourImagePath";

This won't place the image on the page, but it will load it for future use.

Hope this helps!!

Answer 3

Here is the CSS way to preload the images.

Refer the accepted answer from this link: How to Preload Images without Javascript?

This will basically load all images on the background, while your showing the loading gif and the actual reference of the image will load it from cache.