1

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

inasiopo
  • 55
  • 1
  • 10

3 Answers3

5

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;
}
Andras Szell
  • 527
  • 2
  • 13
  • it will still be slow if the size of his images are huge (which by the sound of it is) so "solving" it with code won't help. But I like this solution – zerohero May 31 '16 at 13:22
  • I have tried this option. But now the loading of the page takes much longer initially. Is that a known effect or am I doing something wrong? – inasiopo May 31 '16 at 13:24
  • size of images is approx 200k each – inasiopo May 31 '16 at 13:24
  • 1
    @inasiopo Yes, it is expected. Since CSS loading blocks the render of the page. Try to optimize your images. – Andras Szell May 31 '16 at 14:48
0

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!!

Toby Penk
  • 126
  • 7
0

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.

Community
  • 1
  • 1
Shiv
  • 1,211
  • 4
  • 14
  • 24