The explanation of the image preload failure

When an image is declared with Javascript, the browser does not stop loading the page until the image has finished loading, but instead continues to load the page and the image is downloaded in the background.

The error is thinking that the browser, when encountering a statement:

image = new Image();

image.src=”/articles/RutaDeLaImagen”;

stops loading the rest of the page’s code until it has preloaded that image into the Cache. This is not like this. Reading the above code causes the browser to start loading images in the background and CONTINUES to load HTML code. That is, the loading of images with javascript and the loading of the rest of the code almost OVERLAPPED at times, being the most normal thing for the browser to reach the tag without a single image being in the Cache, despite having it preloaded before (i.e. instantiated from objects of class Image).

In turn, upon reaching tags, it also begins to preload these images in the background, but PLACING THEM IN THE QUEUE of the preloads, that is, they have less priority than those declared with JavaScript (for this to be thus it is FUNDAMENTAL to preload the images that interest us with JavaScript before the tag). This priority is what in programming is known as the concept of QUEUE (FIFO = First In First Out, which in our case translates into: the first image that is in the queue for preloading is the first to be loaded); it is, by opposition, the opposite of the concept of PILA (Stack) which is LIFO (Last In First Out, the last element to enter is the first to leave).

Thus, regarding the preloading of images in Cache, the Netscape web development documentation page clarifies that:

The resulting image will be obtained from cache, rather than loaded over the network, assuming that sufficient time has elapsed to load and decode the entire image. You can use this technique to create smooth animations, or you could display one of several images based on form input. After reading the label

Having said this, it should be said that we should NOT confuse the onLoad event that is frequently used in with the fact that a web page is loaded in its entirety. On the contrary, with this event we will only detect that the browser has read the last page tag, but images, sounds, or other objects embedded in the page will continue to load regardless.