load time is the same with preloading or without

Question

This is my code for preloading images, placed in head of page.

I checked the browser's cache, and it works, images are there.

<script>
function preload(){
    var imgs = Object.prototype.toString.call( arguments[ 0 ]) === '[object Array]'
      ? arguments[ 0 ] : arguments;
    var tmp = [];
    var i   = imgs.length;
    for( ; i-- ; ) tmp.push( $( '<img />' ).attr( 'src', imgs[ i ]));
}
preload(
'frederic/01.jpg',
'frederic/02.jpg',
. . .
'frederic/35.jpg'
);
</script>

<body>
<div class="hidden" id="storeT">
<img src=frederic/01.jpg alt='img'>
<img src=frederic/02.jpg alt='img'>
. . .
<img src=frederic/35.jpg alt='img'>

I cleared the browser's cache an tested. I expected a great improvement regarding page load time, but there is no any difference with this code, or without.

Also, Pingdom Speed Test shows no difference.

Is something wrong with the code? How can I use preloading to make the load time shorter?

score 1 · Accepted Answer · answered Jul 21 '14 at 14:24

Just because you are loading images in Javascript doesn't mean you're going to get a better page load time. I believe that the speed tests you mention measure how long it takes a single page to load. One of the advantage of loading images in Javascript is that you can do so programatically, whenever you want. So you could, for example, choose to load some images after the page is done loading. This tends to work when you are loading images that are not immediately visible on the page, like images found on other pages, or images that only appear when the user takes an action (like images found in a carousel, or in a modal window that is rendered on the page but doesn't appear until the user clicks on something). In your example above, you are simply loading the images with some inline Javascript during the page load (and the images are still being called by the image tags below) so you're not going to see a speed improvement. In order to get the improvement, you need to remove any Javascript or HTML that will load the image files during your page load. If you can afford to load these images after the page is done loading, you could do something like this:

window.onload = function() {

  document.getElementById('image-1').src = 'frederic/01.jpg';
  document.getElementById('image-2').src = 'frederic/02.jpg';
}

oliakaoil, all images are used inside an img slider. Do you mean I should leave the js code inside the head, remove the img tags in the body, and at the end use the .onload function? — qadenza, Jul 21 '14 at 15:08
Yes, you need to move your `preload` call into the onload callback entirely. So you will likely want to remove the single `preload` call you show above, and then call it from inside the onload callback instead. You will also need to remove the image tags (since those loads the images) and either write some javascript or toggle some options (or otherwise fiddle with the image slider code) to load the image tags and images during the onload event (or at some other time) as well. — oliakaoil, Jul 21 '14 at 15:15

load time is the same with preloading or without

1 Answers1