[英]How to fetch img srcset url using jquery
I have an image tag with srcset attribute holding a value(url).我有一个带有 srcset 属性的图像标签,其中包含一个值(url)。 Now i need to fetch and generate same for src attribute as well.
现在我还需要为 src 属性获取和生成相同的内容。
$('img').attr('srcset')
The above code is not working and returns undefined.上面的代码不起作用并返回未定义。
<img srcset="http://s7d2.scene7.com/is/image/Hod/Mobile600x160?$600x160$" alt="">
I need to fetch above srcset value(" http://s7d2.scene7.com/is/image/Hod/Mobile600x160 ?$600x160$") and append the same value for src attribute.我需要获取高于 srcset 值(“ http://s7d2.scene7.com/is/image/Hod/Mobile600x160 ?$600x160$”)并为 src 属性附加相同的值。 Kindly help.
请帮助。
Thanks in advance.提前致谢。
you need to wait till the dom is loaded: $(document).ready(function(){})
你需要等到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="">
you still can change back to $('img')
instead of $('.img')
but be aware that then every img tag will be progressed.您仍然可以改回
$('img')
而不是$('.img')
但请注意,每个 img 标签都会被处理。
use this it works for me !使用它对我有用! as XzenTorXz said in above with a little change :
正如 XzenTorXz 在上面所说的,稍作改动:
$(document).ready(function(){
var img = $('img[srcset]');
img.each(function(){
this.src = $(this).attr('srcset');
});
});
HTML 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 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参考http://codepen.io/jtleathers/pen/IGytf
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);
});
});
Here is how you get array of URLs from multiple images from "srcset":以下是如何从“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];
})
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.