bascule image sur hover en utilisant Jquery

Tout d'abord s'il vous plaît ne me suggère pas de le faire en utilisant css.bascule image sur hover en utilisant Jquery

J'ai besoin de basculer entre deux images à la volée en utilisant Jquery. J'ai besoin que deux images (deux images à bascule) soient téléchargées au moment du chargement de la page. Car sinon cela créera un décalage pour la première fois. Comme mes images sont deux bannières sur la page d'accueil. J'ai besoin de faire quelque chose en créant un objet image, en le pré-chargeant et plus tard en basculant les objets.

Je ne peux pas faire cela en utilisant css simple parce qu'il y aura un décalage pour la première fois l'utilisateur que l'image n'est pas présente sur le chargement de la page. et ça donne un mauvais coup d'oeil.

Source

2010-08-24 Mohit Jain

J'ai trouvé cette question à la recherche de quelque chose d'autre, mais vous pouvez utiliser CSS pour basculer ces images, et avoir les images sur votre page en tags, avec l'affichage défini sur none. Cela fera l'ensemble du processus sans javascript. –

@AndrewJackman S'il vous plaît lire la question à nouveau, j'ai clairement spécifié: Je ne peux pas le faire en utilisant css simple car il y aura un décalage pour la première fois pour l'utilisateur que l'image n'est pas présente sur le chargement de la page. et ça donne un mauvais coup d'oeil. –

Oui, je comprends parfaitement votre raisonnement, mais il y a un moyen de charger l'image au chargement de la page. Si vous avez '' en bas de l'étiquette du corps. Ensuite, si vous utilisez 'image.jpg' plus tard par un effet de survol, il n'y aura pas de retard car le navigateur aura déjà téléchargé l'image. –

$(function(){ 
    var imgs = [ 
     new Image(), 
     new Image() 
    ]; 

    imgs[0].src = 'http://www.typeofnan.com/pic1.jpg'; 
    imgs[1].src = 'http://www.typeofnan.com/pic2.jpg'; 

    $('#hoverelement').hover(function(){ 
     $(this).html(imgs[0]); 
    }, function(){ 
     $(this).html(imgs[1]); 
    }); 
});

Cela devrait fonctionner, même si je ne suis pas Assurez-vous que c'est ce dont vous avez besoin. Vous pouvez ajouter un événement onload aux deux images pour être sûr qu'elles sont réellement chargées avant d'autoriser le vol stationnaire.

Source

2010-08-24 13:41:33 jAndy

Voici la démo rapide du ci-dessous le code: http://jsbin.com/itunu

HTML:

<!DOCTYPE html> 
<html> 
<head> 
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> 
<meta charset=utf-8 /> 
<title>Hello world !!</title> 

</head> 
<body> 
    <img /> 
</body> 
</html>

Javascript:

var a = []; 

a[0] = "http://i577.photobucket.com/albums/ss219/music_munster/powerpuff-girls-092.jpg"; 
a[1] = "http://img.listal.com/image/459059/500full.jpg"; 


$(document).ready(function() { 
    var source = $.preload(a); 
    $('img').attr('src',source[0].src); //just an acknowledgement (pre-loading done) 
    $('img').hover(function() { 
    $('img').attr('src',source[1].src); 
    },function() { 
    $('img').attr('src',source[0].src);  
    }); 

}); 



//Image Preloading.... 
var cache = []; 
    $.preload = function(arr) { 
    for(var i = 0; i<arr.length; i++) { 
     var img = new Image(); 
     img.src = arr[i]; 
     cache.push(img); 
    } 
    return cache; 
    };

Source

2010-08-24 13:40:55

bascule image sur hover en utilisant Jquery

Répondre

Questions connexes