Question

我想获得页面上所有图像的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;


});

不确定有什么问题，有什么想法吗？

由于让

Answer 1

IMG标签使用'src'而非'href'。

Answer 2

此示例适用于您的问题。

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

Answer 3

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

我认为这应该有帮助

Answer 4

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

所以你必须至少等待onload事件。

另一个可能有点痛苦的解决方案是检查服务器端图像的渲染宽度/高度，并在＆lt; img width，height＆gt;中提供。属性。

Answer 5

假设你有这个标记：

<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。

Answer 6

关于Rei的上述答案......这是正确的，你真的想确保在你开始抓住尺寸之前，所有东西都已经完全装满了。一个有用的工具是jquery.imagesloaded。

使用jQuery获取图像的href，src，width，height

6 个答案: