Replace impossible sur jquery

Bonjour,

Le but de mon script est de récupérer tous les liens img > data-src et de remplacer /img/image01.jpg en /img/mobile/01.jpg quand la taille d'écran est inférieur à 720px width. :?

ce code marche j'ai bien la liste des liens dans la console

Code:

---

1 2 3 4

$('img').each(function(){ test = $(this).attr('data-src'); console.log(test); });

---

mais si je met replace ca ne marche pas

Code:

---

$(this).attr('data-src').replace("img/","img/mobile/");

---

Citation:

---

Uncaught TypeError: Cannot read property 'replace' of undefined
at HTMLImageElement.<anonymous> (monscript.js:11)
at Function.each (jquery.min.js:2)
at r.fn.init.each (jquery.min.js:2)
at HTMLDocument.<anonymous> (monscript.js:10)
at j (jquery.min.js:2)
at k (jquery.min.js:2)

---

on peut voir le html de ta balise image ?

si elle on réellement un data-src ...

Code:

---

$(this).data( 'src', $(this).data('src').replace("jpg","png") );

---

merci pour la reponse, Bah bien sur vu qu'il me les affichent dans la console.

Dans mon index j'ai des img sans src juste des data-src qui servent pour lazyload. Mais osef.

Ton code fait la même erreur, replace n'est pas reconnu. Jai vu sur d'autres forum qu'il faut rajouter val() partout.. ca ne fait plus d'erreur mais rien ne marche.

L'erreur n'est pas dans le replace ...
Mais dans le fait que l'objet sur lequel tu essayes de l'appliquer n'existe pas .

Il va falloir nous montrer un peu plus de code en situation

Je ne vois pas ce que je peux montrer de +,

Code:

---

1 2 3 4

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script type="text/javascript" src="js/lightbox.min.js"></script> <script type="text/javascript" src="js/jquery.unveil.js"></script>

---

monscript.js est dans le footer, donc après le body, et après tous les scripts :

Code:

---

1 2 3 4 5 6 7

$( document).ready(function() {   $('img').each(function(){ test = $(this).attr('data-src'); console.log(test); });

---

La console m'affiche bien

Code:

---

1 2 3

img/conseil.jpg etc etc

---

et le index.php contient des :

Code:

---

<img alt="" data-src="img/conseil.jpg"/>

---

Bonjour,
quand on utilise ce sélecteur $('img') TOUTES les balises <img> sont récupérées même celles qui non pas de data-src donc cela peut planter.

Il serait donc plus judicieux de faire un requête du type :

Code:

---

1 2 3 4

$("img[data-src]").each(function(){ test = $(this).attr("data-src"); console.log(test); });

---

ou

Code:

---

1 2 3 4

$('img[data-src]').each(function(){ test = $(this).data('src'); console.log(test); });

---

oui en effet j'avais ça avant, pas fait gaffe. Ah force de supprimer et recommencer mon code.
Mais ça ne résous pas mon problème malheureusement

En quoi cela ne résout pas ton problème ?

Code:

---

1 2 3 4 5

$('img[data-src]').each(function(){ $(this).data( 'src', $(this).data('src').replace("img/","img/mobile/")); test = $(this).data('src'); console.log(test); });

---

Ah d'accord tu mets data(), je mettais val() ou attr().

Donc la ça marche merci ;) mais seulement dans le console.log comment on l'applique sur les images ? ?

et donc ? je n'arrive pas a remplacer les data-src

[Modération] Inutile de citer un message pour y répondre, il existe un bouton répondre à la discussion.

Citation:

---

Ah d'accord tu mets data(), je mettais val() ou attr().

---

cela fonctionne très bien également avec attr()

Code:

---

1 2 3 4 5

$('img[data-src]').each(function(){ $(this).attr( 'data-src', $(this).attr('data-src').replace("img/","img/mobile/") ); test = $(this).attr('data-src'); console.log(test); });

---

ne sachant pas trop ce que tu souhaites faire au final, je dirais changer la src de l'<img>, il faut procéder par ordre

Code:

---

1 2 3 4 5 6 7 8

$('img[data-src]').each(function(){ // récupération de data-src var dataSrc = $(this).attr( 'data-src'); // data fait également l'affaire // opération de remplacement dataSrc = dataSrc.replace("img/","img/mobile/"); // injection dans src de l'<img> $(this).attr('src', dataSrc); // ici on cible l'attribut src });

---

mmmm bizarre ça ne fonctionne pas.. ou du moins ca marche seulement dans la console.

Ce que je veux faire est simple. quand on est en écran inférieur à 720px toutes les url data-src et donc les src (puisque chrome duplique les data-src en src aussi) sont remplacer avec /mobile/.

le but est de charger des images basses qualités sur mobile. C'est tout

Bonsoir, ça devrait résoudre ton problème !

Code:

---

1 2 3 4 5 6 7 8 9 10 11

$(document).ready(function() { if(window.innerWidth < 720 || window.innerHeight < 720) {   var img = $('img[data-src]'); var src = img.src.replace('img/','img/mobile/'); var datasrc = img.data('src').replace('img/','img/mobile/');   img.attr('src', src); img.attr('data-src', datasrc); } });

---

Quelle version de jQuery utilises-tu ?

Sorry pour le retard. Et merci pour le code :)

Mais nan ça ne marche pas :

"jQuery.Deferred exception: Cannot read property 'replace' of undefined TypeError: Cannot read property 'replace' of undefined"

Il ne comprend toujours pas replace.



je suis en jquery 3.3.1

Code:

---

1 2 3 4 5

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script type="text/javascript" src="js/lightbox.js"></script> <script type="text/javascript" src="js/jquery.unveil.js"></script> <script type="text/javascript" src="js/monscript.js"></script>

---

Citation:

---

Mais nan ça ne marche pas :

---

nous voilà bien avancé :aie:

Qu'est ce que tu as essayé ce bout de code ...

Code:

---

1 2	var img = $('img[data-src]'); var src = img.src.replace('img/','img/mobile/');

---

... normal $() renvoie une collection d''objets jQuery qui ne possèdent pas de méthodes replace().
Reprend le code que je t'ai donné.

Nota : si c'est pour ajuster les images au média alors tu pourrais le faire en HTML5 avec <img srcset...>.

Pas compris. srcset je connais pas, on peut charger une autres images en width720px ??
ou alors ça reprend la même image et la réduit ?
SI oui je me prends vraiment la tête pour rien la :lol:

EDIT : je viens de lire la doc, en effet...j'ai perdu du temps pour rien visiblement XD

EDIT 2 : ouai mais vu que j'ai des data-src ca ne fonctionne pas avec srcset, donc faire un petit script au lieu de modifier tout le html ca m'arrangerait ^^

tu peux m'aider à le faire marcher le code ?