Retina.js uniquement pour images avec classe Fermé

Question

Bonjour, 

J'utilise sur mon site le script retina.js (http://imulus.github.io/retinajs/).

Cela fonctionne très bien, il faut juste penser à chaque fois à uploader une image deux fois plus grande portant à la fin de son nom l'attribut "@2x".

Le problème, c'est qu'il y a des images générées par WordPress, comme les images à la une par exemple. Je me retrouve alors avec des erreurs 404 dans mon code "Failed to load resource: the server responded with a status of 404 (OK)". L'erreur indique que le navigateur n'a pas trouvé l'image correspondante avec l'attribut "@2x". J'ai également le même problème pour les images au format svg (pas besoin d'avoir deux tailles d'images étant donné que c'est vectoriel). 

Savez-vous s'il est possible de faire en sorte que le script Retina.js ne fonctionne que pour les images portant une classe ? 

Par exemple :

<img src="monimagetropcool.jpg" class="retina" width="120px"/>

Merci d'avance :D

Emilie · Answer

Voici la solution, pour celles et ceux qui cherchaient comme moi :

Changer
var images = document.getElementsByTagName('img'), retinaImages = [], i, image;

Par
var images = document.getElementsByClassName('has-retina'), retinaImages = [], i, image;

Et mettre la class .has-retina aux images qui doivent être changées si l'écran de l'internaute est très haute définition.

La bise ! :)

Retina.js uniquement pour images avec classe

1 réponse

Discussions similaires

Newsletters