使用jQuery获取图像的href,src,width,height答案

【问题标题】：Get href,src,width,height of image using jQuery使用jQuery获取图像的href,src,width,height
【发布时间】：2014-07-08 19:12:50
【问题描述】：

我想获取页面上所有图像的 href、src、width、height。 jQuery 代码是

$('img:regex(data:extension, jpg)').each(function() {


var imgsrc = $(this).attr('href'); 

//$(this).attr('width') =0;                                     

var newImg = new Image();
newImg.src = imgsrc;    
var width = newImg.width;
//width is 0;


});

不知道哪里出了问题，有什么想法吗？

谢谢让

【问题讨论】：

标签： jquery image attributes

【解决方案1】：

IMG 标签使用“src”而不是“href”。

【讨论】：

假设
啊，好的，那么你需要使用父选择器来获取锚点。你能详细说明一下申请吗？内部图像是缩略图还是完整的东西？如果您是第一次加载图像，则需要等到图像加载后才能知道宽度/高度，例如...
hmm...页面加载后如何触发高度，我也想获得锚点
不确定你在问什么......但是 javascript 图像对象有一个 onload 事件，你可以设置为在图像加载后调用。要获取锚标记，您可以使用 $('A:has(img:regex(data:extension, jpg))')。（我假设您使用的是 James Padolsey 的正则表达式过滤器。）

【解决方案2】：

此示例适用于您的问题。

$("img").each(function(){
    alert($(this).attr('src') + " - " + $(this).attr('width') + " - " + $(this).attr('height'));
});

【讨论】：

【解决方案3】：

如果这不起作用，我不会感到惊讶——至少在文档及其所有资源完全加载之前不会。 HTML 通常不会指定图像的宽度或高度，除非它已在标签本身中指定。

因此，您至少必须等待 onload 事件。

另一种解决方案可能会有点麻烦，它是在服务器端检查图像的渲染宽度/高度，并在属性中提供。

【讨论】：

【解决方案4】：

假设你有这个标记：

<a href="link1"><img src="foo.jpg"></a>
<a href="link2"><img src="bar.jpg"></a>

您可以通过jQuery.closest()获取包装链接，如下：

$('img[src$=.jpg]').each(function() {
    $img = $(this);
    $link = $img.closest('a');
    var href = $link.attr('href');
    // ...

    // Assuming you want the image's client width/height:
    var width = $img.width();
    var height = $img.height();
    // ...
});

[name$=value] 是attribute-ends-with selector。

【讨论】：

【解决方案5】：

$('img').each(function() {
   var imgwidth  = $(this)[0].offsetWidth;
   var imgheight = $(this)[0].offsetHeight;
    console.log(imgwidth ,' X ' , imgheight);
});

我认为这应该会有所帮助

【讨论】：

【解决方案6】：

关于 Rei 的上述回答......这是正确的，您确实希望在开始抓取尺寸之前先确保所有内容都已完全加载。一个有用的工具是jquery.imagesloaded。

【讨论】：