Mise à l'échelle des images avec jQuery - cache du navigateur en cours

Question

Pour voir mon problème en action, cliquez d'abord sur this link. Puis cliquez sur this one. Remarquez comment les images sont écrasées? (vous devrez peut-être cliquer sur un à travers le pager pour le voir). Je crois que c'est à cause du cache du navigateur. Voici le javascript faisant le travail:

$("#grid_slider").slider({ 
    value: 50, 
    max: 100, 
    min: 10, 
    slide: function(event, ui) { 
     $('ul#grid li').css('font-size',ui.value+"px"); 
    } 
}); 

$("ul#grid li img").each(function() { 
    var width = $(this).width()/125 + "em"; 
    var height = $(this).height()/125 + "em"; 
    $(this).css("width",width); 
    $(this).css("height",height); 
}); 

J'espère que vous êtes en mesure de reproduire le problème. Je ne sais pas ce qui doit être fait pour résoudre ce problème ... je pensais juste à sortir la fonctionnalité tous ensemble. Merci d'avance.

Answer 1

Je vois le problème que vous décrivez. Je ne pense pas que ce soit le cache du navigateur, en fait, mais le temps de chargement ... J'ai vu le problème sur d'autres sites aussi, et j'ai donc formulé une opinion (informée) à ce sujet.

Il semble que le principal problème est que le navigateur est demandé la taille de l'image avant de savoir ce qui est ... Vos feux de script sur $(document).ready, mais peut-être avant $("ul#grid li img") est complètement chargé, donc pour certaines images $("ul#grid li img").width() peut-être pas connu ...

Peut-être utiliser à la place, et voir si cela aide? (Commutateurs $().each pour $().load)

$("ul#grid li img").load(function() { 
    var width = $(this).width()/125 + "em"; 
    var height = $(this).height()/125 + "em"; 
    $(this).css("width",width); 
    $(this).css("height",height); 
}) 

(complètement une supposition, mais ...)

Addendum: lecture de l'aide jQuery sur la fonction de charge tout à l'heure, il semble que cela ne soit pas exécuté pour choses déjà chargées au moment où il est appelé ... Donc, vous devrez peut-être faire les deux (appelez $().each et définir $().load) ...