Javascript Girl
  1. Javascript Girl
  3. JQuery pour préciser l'URL dans l'attribut src img
Intereting Posts
Google Places API – Demande de détail des lieux indéfinie Comment détecter IE7 avec javascript ou jquery et ajouter une classe à div Chutzpah et Jasmine 2.0 et requêtes L'utilisation de getPreventDefault () est obsolète. Utilisez defaultPrevented à la place Modifier le fond noir de la toile html sur fond blanc lors de la création de l'image jpg à partir de l'image png Devrait-on écrire une fenêtre.X en se référant à une propriété globale intégrée X dans le navigateur (de bureau)? Comment obtenir une distance par ville + zipCode sur Google Maps API Reactionjs Impossible de lire les "clés" de propriété de indéfinis Throw Error ('msg') vs throw new Error ('msg') Comment appeler une fonction javascript une fois sur la charge de la page, recharger les pages, ne pas l'appeler à nouveau Modifier l'ordre des colonnes du tableau Comment créer vim ctags pour javascript moderne Comment utiliser Select2 avec JSON via la requête Ajax? Jasmine.js: Conditions de course lors de l'utilisation de "runs" Comment modifier le texte sur Kendo UI Grid détruire ou supprimer une action de commande?

JQuery pour préciser l'URL dans l'attribut src img

J'ai juste besoin d'un extrait jQuery pour faire le pré-img src, c'est-à-dire 

<img src='/img/picture1.jpg' />

L'extrait de code jQuery consiste à préciser cette URL 

 http://cdn.something.com/

Donc après l'extrait jQuery, il devient comme 

 <img src='http://cdn.something.com/img/picture1.jpg' />

Toute aide est grandement appréciée.

Jusqu'à présent, j'ai écrit quelque chose comme 

 $().ready(function(){ var cdn ='http://cdn.something.com'; $('img').attrib('src', cdn);

});

Cependant, il est remplacé par src plutôt que par pré

Ce n'est pas vraiment lié à jQuery, de toute façon, vous pourriez le faire avec .attr() qu'est-ce que c'est? : 

 $('img').attr('src', function(index, src) { return 'http://cdn.something.com' + src; });

Cela affecterait tous vos nœuds <img> dans votre balisage et remplacer le src .

Quoi qu'il en soit, je ne suis pas si sûre que ce soit une excellente idée. Au moment où l'événement DOMready déclenche, un navigateur peut déjà avoir essayé d'accéder à l' old attribut source. Si vous devez le faire en Javascript, il est probablement une meilleure idée de stocker les path info dans un data attribute personnalisé data attribute sorte qu'un navigateur n'est pas tenté de charger l'image. Cela pourrait ressembler à:

HTML 

 <img src='' data-path='/img/picture1.jpg' />

JS 

 $(function() { $('img').attr('src', function(index, src) { return 'http://cdn.something.com' + this.getAttribute('data-path'); }); });

Cela devrait le faire. Vous pouvez remplacer this.getAttribute() par $(this).data('path') puisque jQuery analyse ces data attributes dans son hash de données "node". Mais cela créerait un autre objet jQuery, ce qui est vraiment inutile à ce stade.

Cela devrait fonctionner: 

 $.ready(function() { $('img').each(function() { $(this).attr('src', cdn + $(this).attr('src')); }); });

Cependant, je ne suis pas sûr que ce soit la bonne solution pour utiliser un CDN, car le navigateur aura déjà tenté de charger les images de votre serveur au moment où le script sera appelé.

Vous devriez le faire sur le côté serveur à la place.

Selon votre problème spécifique, vous pourriez résoudre ce problème avec une balise de base , mais je suppose que vous ne voudrez que cela sur les images, mais changer la src une fois que la page a été chargée fera reculer les images? Si les images n'existent pas dans l'emplacement actuel, vous devrez modifier l'attribut src avant que la page ne soit chargée (côté serveur).