Question

我有一个带有srcset属性的图像标记，其中包含一个值（url）。现在我需要为src属性获取并生成相同的内容。

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

上面的代码不起作用并返回undefined。

<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(){})

＆＃13;

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

＆＃13;

<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="">

＆＃13;

你仍然可以改回$('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);

for refrence http://codepen.io/jtleathers/pen/IGytf

如何使用jquery获取img srcset url

4 个答案: