Discussion :

[whitePaper]

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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

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)

[SpaceFrog]

on peut voir le html de ta balise image ?

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

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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

[whitePaper]

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.

[SpaceFrog]

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

[whitePaper]

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

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
img/conseil.jpg
etc
etc

et le index.php contient des :

Code php :

Sélectionner tout - Visualiser dans une fenêtre à part

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

[NoSmoking]

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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

ou

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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

[whitePaper]

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

[NoSmoking]

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

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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);
});

[whitePaper]

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.

[NoSmoking]

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

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

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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
});

[whitePaper]

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

[bonjourajax]

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

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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 ?

[whitePaper]

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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>

[NoSmoking]

Mais nan ça ne marche pas :

nous voilà bien avancé

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

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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...>.

[whitePaper]

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

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 ?