Preload array of images for faster load

Question

I read here in SO about preloading the array of images for faster loading of the web page so that when the application needs them to be shown, that would have loaded and can be shown instantly. But my doubt was where to include the code snippet:

at the bottom of page or
at the start (<head>)?

As, I also read that in order for fast loading one should include all the javascripts at the bottom. Which will be a better way? Or do I have to compromise on both the ways?

The javascript code:

<script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>
<script type="text/javascript">
function preload(arrayOfImages) {
    $(arrayOfImages).each(function(){
        $('<img/>')[0].src = this;
    });
}
preload([
    'images/bg.jpg',
    'images/logo1.png',
]);
</script>

By the way, if you use CSS sprites, you can eliminate the need for preloading. — Halil Özgür, Jan 13 '13 at 12:54

Alexander · Answer 1 · 2013-01-13T12:56:57.277

Even though all the other answers are inherently correct. They don't seem to address you directly.

Your script is not making use of any DOM elements. Which means that waiting for the DOM to load is not a concern at all.

The halt of the layout rendering while downloading a <script/> is always a concern (unless you use new HTML5 capabilities such as async), that's why they prefer to place it before </body>.

By placing it before </body>, your rendering will not be halted. Performance-wise, iterating such a tiny array may only be a micro-optimization.

By the way, you don't need to wrap the array in $() to use .each(), you should use $.each.

function preload(arrayOfImages) {
    $.each(arrayOfImages, function(index, image){
        $('<img/>')[0].src = image;
    });
}

score 0 · Answer 2 · edited May 23 '17 at 11:51

0

Generally, put your function calls and everything that you want to do after the page finishes loading inside

$(document).ready(function() {
  // Handler for .ready() called.
});

(See Docs).

This also applies to your call to preload(...). As you use $('<img/>')[0].src = this, the browser will cache the image according to this comment: Preloading images with jQuery

Edit: The position of the <script/> tag in your DOM tree plays only a minor role, as Konstantin pointed out.

edited May 23 '17 at 11:51

Community

1
1

answered Jan 13 '13 at 12:38

saschoar

8,150
5
43
46

The idea is to preload images before the page finishes loading, not after! – Nev Stokes Jan 13 '13 at 12:41
1

But the question says _"when the application needs them to be shown"_, so I assumed he would like to preload images for later usage, without being visible at the very start. – saschoar Jan 13 '13 at 12:46
1

@NevStokes, preloading means to load an image that it is not currently in the DOM – Alexander Jan 13 '13 at 12:52

score 0 · Answer 3 · answered Jan 13 '13 at 12:44

The top and the bottom of the HTML page is relevant because that is how the browser reads your page. Stuff on the top gets done before the stuff on the bottom.

In regards to image pre-loading you should do it in the top of the page in the <head>. Why? Because you don't need to use it yet. The rest of the page isn't ready and chances are that the place where you want to put the image doesn't even exist just yet.

We usually put JavaScript on the bottom of the page because we want to do something when the DOM is ready. You can put it on the top as well! But you would have to NECESSARILY use the $(document).ready(function(){}); in order to be certain that it would work as intended.

So, initiate your pre-loads on the top (or by using window.onload) while the rest of the page is loading as well. You wont really get much benefit out of doing it on the top unless you do it using CSS or if you bind the load event of a particular div that occurs on the top of the page and pre-load your images there.

score 0 · Answer 4 · answered Jan 13 '13 at 12:51

0

Why not making a DIV on the very begining of the BODY section and move that DIV outside of the visible area?

answered Jan 13 '13 at 12:51

Zim84

3,404
2
35
40

Preload array of images for faster load

4 Answers4