jQuery Girl
  1. jQuery Girl
  3. Basculer l’image en survol à l’aide de JQuery
Intereting Posts
jQuery actualise automatiquement chaque minute en fonction de la seconde fois de repos en cours Le bloc setInterval de Javascript pour la fonction est-il renvoyé? jquery n’autorise que le nombre flottant en entrée Interrompre l’exécution du navigateur en boucle (mise à jour avec des violons) Passer un tableau multidimensionnel de jsp au contrôleur Comment diviser une ligne d’un tableau en deux lignes à l’aide de jQuery Jquery URL de chargement avec ajax JQuery UI: div négatif sur la marge de coupe sur l’effet Problème de délégué jQuery dans Firefox 11 jQuery UI comment définir une option de confinement déplaçable sur le parent du parent Minuteur Pomodoro: la valeur variable va à ‘NaN’ Corps de la requête vide sur la requête jQuery JSON ajax JQuery-File-Upload 404 Erreur lors de la suppression La configuration RequireJS ignorée par inline nécessite des appels qui suivent la balise script qui charge mon application. police arabe italique

Basculer l’image en survol à l’aide de JQuery

Tout d’abord, veuillez ne pas me suggérer de le faire avec css.

Je dois basculer entre deux images en survol à l’aide de Jquery. J’ai besoin que deux images (deux images à bascule) soient téléchargées au moment du chargement de la page. Parce que sinon, cela créera un temps de latence pour la première fois. Comme mes images sont deux bannières sur la page d’accueil. Je dois créer quelque chose d’image, le pré-charger puis le basculer.

Je ne peux pas faire cela en utilisant de simples CSS car il y aura un décalage pour le premier utilisateur car l’image n’est pas présente au chargement de la page. et ça donne un mauvais regard. 

 $(function(){ var imgs = [ new Image(), new Image() ]; imgs[0].src = 'http://soffr.miximages.com/jquery/pic1.jpg'; imgs[1].src = 'http://soffr.miximages.com/jquery/pic2.jpg'; $('#hoverelement').hover(function(){ $(this).html(imgs[0]); }, function(){ $(this).html(imgs[1]); }); });​

Cela devrait fonctionner, même si je ne suis pas sûr si c’est ce dont vous avez besoin. Vous pouvez append un événement onload aux deux images pour vous assurer qu’elles sont réellement chargées avant d’autoriser le survol.

Voici la démonstration rapide ci-dessous Code: http://jsbin.com/itunu

HTML: 

      Hello world !!

Javascript: 

 var a = []; a[0] = "http://soffr.miximages.com/jquery/powerpuff-girls-092.jpg"; a[1] = "http://soffr.miximages.com/jquery/www.listal.com"; $(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