Problem when "preloading" images

0

I have several images on the web page. What I need is that when loading the page all the images are loaded the same (for example, the drawing of a clock, this I do to load the web faster) and that they "pre-load" the correct images in cache. When these correct images are completely "pre-loaded" in cache, replace the temporary image (that of the clock) with the correct one.

I have tried it with css property "background" but it does not work for me. Does not show the clock, shows directly the original / correct.

In short, when loading the page that shows an image and when it is preloaded the correct one that is replaced by another one.

I've also tried onload but nothing, it does not work either.

Greetings.

    
asked by M. Giner 19.09.2017 в 11:22
source

1 answer

2

A simple way, and without the need to use javascript, may be to include the temporary image as background in base64 so that it is shown immediately and establish the urls of the images in the src attributes of these:

img{
  width: 200px;
  height: 200px;
  background: url(data:image/png;base64,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);
  
}
<img src="https://i.pinimg.com/736x/48/bd/3f/48bd3f6e928d7cb4b8d499cb0f96b8a8--despicable-minions-funny-minion.jpg">
<img src="https://images-na.ssl-images-amazon.com/images/G/01/aplusautomation/vendorimages/65fa961e-8f22-4fe6-a420-3c3c26dd2953.jpg._CB289161999__SL300__.jpg">
<img src="https://vignette2.wikia.nocookie.net/despicableme/images/2/2b/Stuart.png/revision/latest?cb=20161108162855">
    
answered by 19.09.2017 в 12:12