charger le fichier sur hover en utilisant jQuery

Question

Je veux charger un fichier externe (en utilisant jQuery) lorsque l'utilisateur survole un div. J'ai essayé de le charger comme un fichier CSS en stationnaire mais pas de chance. (De plus, je peux charger un fichier css sur le vol stationnaire, non? Ce code, j'ai essayé en est ci-dessous.)

$(document).ready(function() { 
    $("#f1_container2").hover(function() { 
     $('head').append('<link rel="stylesheet" href="theme/supersized.shutter.css" type="text/css" media="screen" />'); 
    }); 
}); 

Answer 1

Vous pouvez charger le contenu en utilisant $ ("cible "). Charge (" file.html"), où file.html est un fragment HTML contenant une balise. Comme CSS est passif (il ne fait rien tant que quelqu'un ne l'utilise pas), il peut s'asseoir dans la tête en premier lieu. De cette façon, lorsque vous survolez une div, vous pouvez faire $ (". Target"). AddClass ("newClass") pour appliquer un style groovy. Hover() peut également prendre une SECONDE fonction, qui est invoquée lorsque la souris quitte la cible, de sorte que vous pouvez annuler ce que vous avez fait au passage de la souris.

Answer 2

Le document a déjà été chargé et rendu lorsque vous ajoutez le code de la feuille de style. Le navigateur a déjà récupéré les ressources nécessaires et ne récupérera pas un fichier parce que vous avez ajouté du code.

Je recommanderais, comme mentionné, de pré-charger vos images ou d'utiliser une autre technique pour récupérer le fichier en vol stationnaire.

Je crois que quelque chose comme ça peut fonctionner.

$(document).ready(function() { 
    $("#f1_container2").hover(function() { 

     // The easy way 
     //$('head').append('<img src="images/sprite.gif">'); 

     // The cool way 
     var $img = $('<img>', { 
      src: 'images/sprite.gif', 
      load: function() { 
       $(this).fadeIn('slow'); 
      }, 
      css: { 
       display: 'none' 
      }  
     }).appendTo('body'); // append to where needed 
    }); 
});