Many people asks me for help here on the site about how to present an image without it slow to appear both. The solution, basically, is to load the image before the user requests your viewing. An image will appear on the screen faster if it is already cached, in other words, is already done your download to PC User.
The objects of a web page (Figures, texts, videos, sons) are only loaded into the user's PC when requested, in other words, some code when the page calls that file.
Usually put a link to an image and only when the user clicks this link is that the image is loaded. We can speed up this process for informing the page that loads the image as soon as possible, regardless of user action. How we do it? Various forms, but here's a show that's most elegant; through JavaScript.
Follow the Code:
1: <head>
2: "javascript">
3: imagem01 = new Image();
4: imagem01 = "www.seudominio.com.br/imagem01.gif";
5:
6: imagem02 = new Image();
7: imagem02 = "www.seudominio.com.br/imagem02.gif";
8:
9: imagem03 = new Image();
10: imagem03 = "www.seudominio.com.br/imagem03.gif";
11: </script>
12: </head>
Note that this script is inside the header tag of the HTML (), forcing the execution as soon as possible. It creates objects of type "Image" and sets the image path. Doing this, the user's browser will now bring the server image to the PC user, storing it in memory and, consequently, in cache.
The downside of this script is that the images are being loaded with the page content. This may advance the loading of images and slow page loading. One suggestion is to put this script at the end of the HTML file or create a function that runs only after the page load.
Furthermore, you can create a repetitive function to load multiple images (through an Array), but these things I leave to your imagination and need.
Hi Guilherme, mto good tip, earned!
To make a loop, or to load more than one image. I put it in a “for”? Or could do “imagem02 = array();”.
Abs!
Hello Marcelo!
Long time no I schedule, but certainly a solution with “for” or “array” will meet your need. Unfortunately I can not help you much about it until now because I've forgotten the syntax of JavaScript.
I suggest you search Google using these commands.
Abs!
haha like this trick!
better than filling the code with those functions!
Oi Bruno, your code is super clear. However, url calling the src image is a variable. Former http://www.meusite.com/pagina.asp?registro=3 . Nese case how would your code :
ai buddy as it does to send a url to an image on my form it opens the image on the screen type I have a simple chat there I type in the message folder next code then he sends to the form that brings me that message as not . you can give me a help?
legal face.. I've met the "trick" but today while developing a script I came across the following doubts:
if I send a picture to upload 5mb, eg, I would leave when he finished loading the image?
Yes, the image class has a method called onload.
would be something like:
imagem02 = new Image();
imagem02 = "www.seudominio.com.br/imagem02.gif";
imagem02.onload = function(){
alert('a imagem foi carregada');
};