如何使用 jquery 獲取 img srcset url

Question

我有一個帶有 srcset 屬性的圖像標簽，其中包含一個值（url）。 現在我還需要為 src 屬性獲取和生成相同的內容。

$('img').attr('srcset')

上面的代碼不起作用並返回未定義。

<img srcset="http://s7d2.scene7.com/is/image/Hod/Mobile600x160?$600x160$" alt="">

我需要獲取高於 srcset 值（“ http://s7d2.scene7.com/is/image/Hod/Mobile600x160 ?$600x160$”）並為 src 屬性附加相同的值。 請幫助。

提前致謝。

Answer 1

你需要等到dom被加載： $(document).ready(function(){})

 $(document).ready(function(){ var img = $('.img'); img.each(function(){ this.src = this.srcset; }); });

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <img class="img" srcset="http://s7d2.scene7.com/is/image/Hod/Mobile600x160?$600x160$" alt=""> <img class="img" srcset="http://s7d2.scene7.com/is/image/Hod/Mobile600x160?$600x160$" alt="">

您仍然可以改回$('img')而不是$('.img')但請注意，每個 img 標簽都會被處理。

Answer 2

使用它對我有用！ 正如 XzenTorXz 在上面所說的，稍作改動：

$(document).ready(function(){
  var img = $('img[srcset]');
  img.each(function(){
    this.src = $(this).attr('srcset');
  });
});

Answer 3

HTML

  <img src="http://jonathonleathers.com/images/germany-src.jpg" 
     srcset="http://jonathonleathers.com/images/germany-1x.jpg 1x, 
             http://jonathonleathers.com/images/germany-2x.jpg 2x"
     alt="Germany"
     id="photo-full">

<div class="thumbs">
  <img src="http://jonathonleathers.com/images/germany-src-thumb.jpg"
       srcset="http://jonathonleathers.com/images/germany-1x-thumb.jpg 1x,
               http://jonathonleathers.com/images/germany-2x-thumb.jpg 2x"
       alt="Germany"
       data-full-src="http://jonathonleathers.com/images/germany-src.jpg"
       data-full-srcset="http://jonathonleathers.com/images/germany-1x.jpg 1x,
               http://jonathonleathers.com/images/germany-2x.jpg 2x">
  <img src="http://jonathonleathers.com/images/hawaii-src-thumb.jpg"
       srcset="http://jonathonleathers.com/images/hawaii-1x-thumb.jpg 1x,
               http://jonathonleathers.com/images/hawaii-2x-thumb.jpg 2x"
       alt="Hawaii"
       data-full-src="http://jonathonleathers.com/images/hawaii-src.jpg"
       data-full-srcset="http://jonathonleathers.com/images/hawaii-1x.jpg 1x,
               http://jonathonleathers.com/images/hawaii-2x.jpg 2x">
</div>

JS

var $src = $(this).attr('data-full-src');
    var $srcset = $(this).attr('data-full-srcset');
    var $alt = $(this).attr('alt');
    $('#photo-full').attr('src', $src);
    $('#photo-full').attr('srcset', $srcset);
    $('#photo-full').attr('alt', $alt);

參考http://codepen.io/jtleathers/pen/IGytf

Answer 4

jQuery(document).ready(function($) {
  jQuery('.woocommerce-product-gallery__image img').click(function(e) {
    e.preventDefault();
    var src = jQuery(this).attr('src');
    var srcset = jQuery(this).attr('srcset');
    var alt = jQuery(this).attr('alt');
    alert(srcset);
    jQuery('.images .zoom .wp-post-image').attr('src', src);
    jQuery('.images .zoom .wp-post-image').attr('srcset', srcset);
    jQuery('.images .zoom .wp-post-image').attr('alt', alt);
  });
});

Answer 5

以下是如何從“srcset”的多個圖像中獲取 URL 數組：

$(document).ready(function(){
  //all photos with srcset attribute
  let photos = jQuery(".photos source")

  //iterate to get first url from the set for each image
  let urls = jQuery.map(photos, function (el) {
    return jQuery(el).attr('srcset').split(' ')[0];
  })
});