Onmouseover with Delay when exchanging image

Question

I’m wearing a onmouseover, but it is giving delay from 0.5 to 1 second to change the image, when I put in my hosting.

 <li>
    <img src="images/clientes/1.png"onmouseover="this.src='images/clientes/a1.png'"onmouseout="this.src='images/clientes/1.png'"/>
</li>

Answer 1

Since the two images are hosted on a remote host, it is natural to have to wait for the loading time of the same.

In this case, you can pre-load the images, one of the ways to do this is with Javascript.:

//liste no Array abaixo todas as imagens que deseja realizar o pré-carregamento.
var imagemURLs = [
  "images/clientes/1.png",
  "images/clientes/a1.png"
];

imagemURLs.forEach(function (imagemURL, indice) {
  new Image().src = imagemURL;
});