Remplacer des extensions d'image dans jQuery, passer de .png à .gif à la volée

Question

Donc, j'utilise CSS3 pour créer des encadrés dans la conception de mon site, ça marche bien et dandy. En utilisant http://css3pie.com afin de créer l'effet dans IE.

Encore une fois, agréable et dandy. Maintenant, vient mon problème -

Pour chaque module relativement positionné, il y a une icône absolument positionnée à l'intérieur, qui est définie comme top: -20px afin de lui donner un effet d'éjection. Évidemment, cela ne fonctionne pas dans IE6, et il ne fonctionne pas bien avec les codes fixes PNG.

Cependant, pour les utilisateurs de IE6, je peux passer à un gif de basse qualité, et ils peuvent le gérer. Maintenant, ma question est: comment puis-je gérer live-switch image.png en image.gif si l'utilisateur utilise IE6?

Je n'ai pas encore trouvé une solution raisonnable pour cette idée. Je pourrais utiliser une feuille de style IE6 pour remplacer les images - cependant il y a plusieurs cas où les images ne devraient pas être basées sur CSS. Ils devraient être des images appropriées.

Des suggestions? Je voulais une sorte de remplacement de jQuery, mais je n'ai pas trouvé une solution raisonnable pour cela non plus.

Answer 1

Il y a plusieurs solutions. Probablement le plus simple serait de créer une fonction jQuery qui a été appelée lorsque l'utilisateur bascule vers le site low-fi (par lien) ou que vous le déterminez en son nom (par des en-têtes ou des commentaires conditionnels).

La fonction jQuery peut utiliser des sélecteurs d'attribut pour simplifier la vie.

function switch_to_low_fi() { 
     $('img[src$=".png"]').each(function(index,element) { 
      element.src = element.src.replace('.png','.gif'); 
     }); 
} 

Pour passer les arrière-plans CSS, je recommande de les classer avec degrade ou quelque chose du genre pour créer un crochet pour jQuery, puis en faisant quelque chose de similaire à ce qui précède. Bien sûr, vous devrez modifier le code au-dessus de la base de votre balisage, mais cela devrait vous aider à démarrer.

Answer 2

Cela devrait fonctionner pour toutes les images non-CSS sur la page:

// when DOM is loaded 
jQuery(document).ready(function(){ 
    // and browser is MSIE 6 or lower 
    if (jQuery.browser.msie && jQuery.browser.version <= 6) { 
     // go through every IMG 
     jQuery('img').each(function(index,element){ 
      // if there's a .png in the source, I'll assume it's at the end 
      // (of course, more complex test could be made) ... 
      if (element.src.indexOf('.png') != -1) { 
       // ...and replace it with a GIF version 
       element.src = element.src.replace('.png','.gif'); 
      } 
     }); 
    } 
}); 

Answer 3

Vous pouvez utiliser ce code PHP dans le CSS de savoir quel navigateur est utilisé:

<?php 
$useragent = $_SERVER[‘HTTP_USER_AGENT’]); 
if (preg_match(‘|MSIE ([0-9].[0-9]{1,2})|’,$useragent,$matched)) { 
    $browser_version=$matched[1]; 
    $browser = ‘IE’; 
    echo ... ;//css selector for Internet Explorer and so on... 
} elseif (preg_match(‘|Opera ([0-9].[0-9]{1,2})|’,$useragent,$matched)) { 
    $browser_version=$matched[1]; 
    $browser = ‘Opera’; 
} elseif(preg_match(‘|Firefox/([0-9\.]+)|’,$useragent,$matched)) { 
    $browser_version=$matched[1]; 
    $browser = ‘Firefox’; 
} elseif(preg_match(‘|Safari/([0-9\.]+)|’,$useragent,$matched)) { 
    $browser_version=$matched[1]; 
    $browser = ‘Safari’; 
} else { 
// browser not recognized! 
$browser_version = 0; 
$browser= ‘other’; 
} 
?> 

Answer 4

Voulez-vous savoir comment remplacer les éléments ou comment obtenir le navigateur/la version?

jQuery a des installations pour les deux.

Obtenir le navigateur est simple. il suffit d'utiliser jQuery.browser.

Pour modifier les images, il faudrait une approche différente pour CSS par rapport à <img>. Réglez tout pour utiliser la PNG et faire quelque chose comme:

if (useGIF()) { 
    var src; 
    $('img').each(function() { 
     src = $(this).attr('src'); 
     $(this).attr('src', src.substr(0, src.length-3) + 'gif'); 
    }; 
    $('.has_bg_png').each(function() { 
     src = $(this).css('background-image'); 
     $(this).css('background-image', src.substr(0, src.length-3) + 'gif'); 
    }; 
}