De modo resumido para todos... aqui les dejo el código HTML. No olviden crear la carpeta images donde vayan a colocar el HTML.
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<title>Preload images</title>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript">
(function($) {
var cache = [];
// Arguments are image paths relative to the current page.
$.preLoadImages = function() {
var args_len = arguments.length;
for (var i = args_len; i--; ) {
var cacheImage = document.createElement('img');
cacheImage.src = arguments[i];
cache.push(cacheImage);
}
}
})(jQuery)
jQuery.preLoadImages("images/hover.jpg", "images/hover.jpg");
</script>
<style type="text/css">
.botonconclase
{
width: 200px;
height: 200px;
background-image: url('images/normal.jpg');
}
.botonconclase:hover
{
width: 200px;
height: 200px;
background-image: url('images/hover.jpg');
}
</style>
</head>
<body>
<div class="botonconclase"></div>
</body>
</html>
Si ustedes hacen la prueba de colocar el comentario a:
jQuery.preLoadImages("images/hover.jpg", "images/hover.jpg");
Verán que el inconveniente esta en que al pasar el mouse por primera vez sobre la imagen, se activa el hover del CSS, pero hasta que no termine de cargar la imagen, no la muestra, lo cual crea una visualización fea del efecto.
Espero le sea de su ayuda.
Como siempre, cualquier duda, dejen su comentario. Sean felices.
muchas gracias me sirvio muchismo lo que si yo tengo el jquery.js y el preloadCssImages.jQuery_v5.js
ResponderEliminarsaludos
Me alegra que te haya servido...
ResponderEliminarSaludos.