Copier l'attribut data-src dans img src lorsque data-src est situé dans div ci-dessus en utilisant array pour appliquer à plusieurs img

Le script que j'essaie d'utiliser (image defer) veut localiser l'attribut data-src dans l'élément img. Mon data-src n'est pas dans cet élément mais dans le div il est contenu. J'ai besoin de changer le script pour qu'il trouve le data-src dans le div au-dessus de chaque élément img que je change. La dernière image D fonctionne car elle contient la commande data-src dans l'élément img. (Pour référence).Copier l'attribut data-src dans img src lorsque data-src est situé dans div ci-dessus en utilisant array pour appliquer à plusieurs img

function init() { 
 
    var imgDefer = document.getElementsByTagName('img'); 
 
    for (var i = 0; i < imgDefer.length; i++) { 
 
    if (imgDefer[i].getAttribute('data-src')) { 
 
     imgDefer[i].setAttribute('src', imgDefer[i].getAttribute('data-src')); 
 
    } 
 
    } 
 
} 
 
window.onload = init;

<body> 
 
    <div class="row"> 
 
    <div class="columns small-12"> 
 
     <div class="responsive-picture" data-src="https://dummyimage.com/1024x768/000/ffffff.jpg&text=large+A"> 
 
     <picture> 
 
      <!--[if IE 9]><video style="display: none;"><![endif]--> 
 
      <source media="(min-width: 64em)" srcset="https://dummyimage.com/1024x768/000/ffffff.jpg&text=large+A"> 
 
      <source media="(min-width: 40em)" srcset="https://dummyimage.com/640x480/000/ffffff.jpg&text=meduim+A"> 
 
      <source media="screen" srcset="https://dummyimage.com/320x240/000/ffffff.jpg&text=small+A"> 
 
      <!--[if IE 9]></video><![endif]--> 
 
      <img alt="Placeholder Picture" src="transparent.gif"> 
 
     </picture> 
 
     </div> 
 
     <div class="responsive-picture" data-src="https://dummyimage.com/1024x768/000/ffffff.jpg&text=large+B"> 
 
     <picture> 
 
      <!--[if IE 9]><video style="display: none;"><![endif]--> 
 
      <source media="(min-width: 64em)" srcset="https://dummyimage.com/1024x768/000/ffffff.jpg&text=large+B"> 
 
      <source media="(min-width: 40em)" srcset="https://dummyimage.com/640x480/000/ffffff.jpg&text=medium+B"> 
 
      <source media="screen" srcset="https://dummyimage.com/320x240/000/ffffff.jpg&text=small+B"> 
 
      <!--[if IE 9]></video><![endif]--> 
 
      <img alt="Placeholder Picture" src="transparent.gif"> 
 
     </picture> 
 
     </div> 
 
     <div class="responsive-picture" data-src="https://dummyimage.com/1024x768/000/ffffff.jpg&text=large+C"> 
 
     <picture> 
 
      <img alt="Placeholder Picture" src="transparent.gif" srcset="https://dummyimage.com/1024x768/000/ffffff.jpg&text=large+C"> 
 
     </picture> 
 
     </div> 
 
     <div class="responsive-picture"> 
 
     <picture> 
 
      <img alt="Placeholder Picture" src="transparent.gif" srcset="https://dummyimage.com/1024x768/000/ff0000.jpg&text=large+D" data-src="https://dummyimage.com/1024x768/000/ff0000.jpg&text=large+D"> 
 
     </picture> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</body>

Merci

Source

2017-05-30 Twinstream

Cela fonctionne vraiment. Je vais créer un violon demain. . S'il vous plaît assurez-vous d'ajouter une référence à JQUERY », notez les modifications de code que je commentais:

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <title>Bootstrap Example</title> 
    <meta charset="utf-8"> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    @*MAKE SURE YOU HAVE A reference to jquery here-I have it in my bundle*@ 
    <script type="text/javascript"> 
     $(function() { 
      $("#aBtn").click(function() { 
       var elems = $("div[data-src]"); 
       var lastOne = elems[elems.length - 1] 
       //replacing the last one with C, so C is shown twice-last two 
       var grandchild = lastOne.children[0].children[0] 
       grandchild.srcset = "https://dummyimage.com/1024x768/000/ffffff.jpg&text=large+C" 
      }) 
     }) 
    </script> 
</head> 
<body> 
    <input type="button" id="aBtn" value="BtnTriggerInsteadOfOnLoad" /> 
    <div class="row"> 
     <div class="columns small-12"> 
      <div class="responsive-picture" data-src="https://dummyimage.com/1024x768/000/ffffff.jpg&text=large+A"> 
       <picture> 
        <!--[if IE 9]><video style="display: none;"><![endif]--> 
        <source media="(min-width: 64em)" srcset="https://dummyimage.com/1024x768/000/ffffff.jpg&text=large+A"> 
        <source media="(min-width: 40em)" srcset="https://dummyimage.com/640x480/000/ffffff.jpg&text=meduim+A"> 
        <source media="screen" srcset="https://dummyimage.com/320x240/000/ffffff.jpg&text=small+A"> 
        <!--[if IE 9]></video><![endif]--> 
        <img alt="Placeholder Picture" src="transparent.gif"> 
       </picture> 
      </div> 
      <div class="responsive-picture" data-src="https://dummyimage.com/1024x768/000/ffffff.jpg&text=large+B"> 
       <picture> 
        <!--[if IE 9]><video style="display: none;"><![endif]--> 
        <source media="(min-width: 64em)" srcset="https://dummyimage.com/1024x768/000/ffffff.jpg&text=large+B"> 
        <source media="(min-width: 40em)" srcset="https://dummyimage.com/640x480/000/ffffff.jpg&text=medium+B"> 
        <source media="screen" srcset="https://dummyimage.com/320x240/000/ffffff.jpg&text=small+B"> 
        <!--[if IE 9]></video><![endif]--> 
        <img alt="Placeholder Picture" src="transparent.gif"> 
       </picture> 
      </div> 
      <div class="responsive-picture" data-src="https://dummyimage.com/1024x768/000/ffffff.jpg&text=large+C"> 
       <picture> 
        <img alt="Placeholder Picture" src="transparent.gif" srcset="https://dummyimage.com/1024x768/000/ffffff.jpg&text=large+C"> 
       </picture> 
      </div> 
      @*I PUT THE SRCE BACK ON THE DIV like it is suppose to be*@ 
      <div class="responsive-picture" data-src="https://dummyimage.com/1024x768/000/ff0000.jpg&text=large+D"> 
       <picture> 
        <img alt="Placeholder Picture" src="transparent.gif" srcset="https://dummyimage.com/1024x768/000/ff0000.jpg&text=large+D"> 
       </picture> 
      </div> 
     </div> 
    </div> 
</body> 
</html>

Source

2017-05-31 00:01:48 kblau

Pour être clair, je suis en train de copier l'url de données src au src pour chaque élément sensible-image de la charge de page. Le programme logiciel que j'utilise lors de l'exportation écrase l'URL src avec une image transparente pour la charge paresseuse. Je suis empêché d'ajouter des attributs à l'img dans le logiciel. Je suis autorisé à ajouter l'attribut data-src à l'image responsive de la classe div avant l'exportation du programme. J'ai maintenant besoin de jquery pour remplacer tous imr src (images) que je pourrais ajouter à la page html (pourrait être de 2 pourrait être 20) avec chaque data-src par div. (Ignorer la référence de la dernière image si elle est confuse) – Twinstream

https://jsfiddle.net/twinstream/kcka3gL8/5/ – Twinstream

En d'autres termes, je dois conserver le src mais copier l'url data-src pour chaque image que je pourrais add .... fonction globale basée sur l'attribut data-src. – Twinstream

J'ai trouvé quelque chose sur stackoverflow

$('.responsive-picture').each(function() { 
var $this = $(this); 
$this.find("img").attr("src", $this.data("src"))

});

Ceci met à jour les 3 premiers src d'image

Source

2017-05-31 06:52:03 Twinstream

Nous pouvons construire sur ce que vous avez (.each). Mais la bonne façon est de ne pas énumérer manuellement. Laissez le cadre énumérer pour vous. Un exemple, var elems = $ ("div [data-src]"); – kblau

Il y avait une autre solution sur la même question qui a résolu ce problème sur stackoverflow qui a reçu des votes plus élevés.

$('.responsive-picture').each(function(){ 
// grab a reference to the current div 
var $el = $(this); 
// get the url from its data-src attribute 
var url = $el.data('src'); 
// create a new Image element to load into 
var img = new Image(); 
// load callback for the new image 
img.onload = function() { 
    // find the first image inside the div 
    // and change its src to the url we just loaded 
    $el.find('img')[0].src = url; 
} 
// set the src of our temp Image to start loading 
img.src = url;

});

Voici le lien pour donner crédit aux affiches

Ne serait-ce dénombrement éviter manuellement? Merci encore !

https://stackoverflow.com/a/14163164/8080326

Source

2017-05-31 16:55:59 Twinstream

Copier l'attribut data-src dans img src lorsque data-src est situé dans div ci-dessus en utilisant array pour appliquer à plusieurs img

Répondre

Questions connexes