Javascript 如何使用jQuery过滤特定大小的图像？

我试图在HTML页面中查找大于特定大小的图像，但以下代码无法正常工作：

function findImages(url)
{
  $.ajax({
        url: url,
        dataType: "html",
        success: function (data) {
            var html = $.parseHTML( data ), 
                imgs = $(html).find("img").filter(function() {
                    return ($(this).width() > 50) && ($(this).height() > 50)
                });
            len = imgs.length; 
            if( len > 0 ){
                $.each(imgs, function(index, img) {
                    console.log(img.width);
                });
            } else {
                console.log("Image not found");
            }
        },
    });
};

---

我希望

过滤器

部分返回

宽度

和

高度

大于50的图像，但它似乎对我不起作用。我做错了什么？

假设html响应如下所示

var imagesHTML = [
  '<img src="http://" width="100" height="500">',
  '<img src="http://" width="100" height="500">',
  '<img src="http://" width="50" height="500">',
  '<img src="http://" width="50" height="50">',
  '<img src="http://" width="100" height="50">',
  '<img src="http://" width="50" height="50" style="width: 100px">'
];

var html = $(images.join(''));

#2按宽度筛选（内联样式）

#3--如果尚未为图像设置宽度和高度属性

function loadImages(content, callback) {
  var html   = $(content),
      urls   = [];

  function filter(width, height) {
    return (width > 256 && height > 256);
  }

  function load(el) {
    var def = new $.Deferred(),
        img = new Image();

    img.onload = function () {
      if (filter(img.width, img.height)) {        
        return def.resolve(el.get(0));
      }

      def.resolve(null);
    };

    img.onerror = function () {
      def.resolve();
    };

    img.src = el.attr('src');

    return def;
  }

  urls = $('<div />').html(html).find('img').map(function () {
    return load($(this));      
  }).get();


  $.when.apply(null, urls).done(function () {    
    callback.call(this, [].slice.call(arguments, 0).filter(Boolean));
  });
}

loadImages(images.join(''), function (images) {
  var content = $('<div />');

  images.forEach(function (el) {
    content.append(el);  
  }); 

  $('body').html(content.get(0));
});

函数加载图像（内容，回调）{
var html=$（内容），
URL=[]；
功能过滤器（宽度、高度）{
返回（宽度>256和高度>256）；
}
功能负荷（el）{
var def=new$.Deferred（），
img=新图像（）；
img.onload=函数（）{
if（过滤器（img.width，img.height））{
返回定义解析（el.get（0））；
}
定义解析（null）；
};
img.onerror=函数（）{
def.resolve（）；
};
img.src=el.attr（'src'）；
返回def；
}
URL=$（''）.html（html）.find（'img'）.map（函数（）{
返回负载（$（此））；
}).get（）；
$.when.apply（null，URL）.done（函数（）{
callback.call（这个，[].slice.call（参数，0.filter（布尔））；
});
}
loadImages（images.join（“”），函数（images）{
var内容=$（''）；
image.forEach（函数（el）{
内容。追加（el）；
}); 
$（'body'）.html（content.get（0））；
});

---

在我看来，最好发送包含所有图像的JSON（URL）：），因为创建不必要的HTTP查询并不是一个好的解决方案。

如果您想让每个图像都符合您的需要，请遍历页面中的每个图像并检查它：

var img = document.getElementsByTagName('img');
for(var i = 0; i < imgs.length ; i++) {
    if (img[i].width > 2) {
        // Do your thing
    }
}

注意：这是纯javascript，如果使用jQuery，只需更改对应的语法位即可

var img = $('img');
for(var i = 0; i < imgs.length ; i++) {
    if (img[i].width > 2) {
        // Do your thing
    }
}

---

您尚未将元素附加到文档中。另外，在获得尺寸之前应该加载图像。@Vohuman我如何等待图像加载？您可以收听

load

事件。@Vohuman是哪个对象的？我想这就是ajax调用中的成功对象？只是一个旁注，如果他们没有在html中设置宽度/高度，不确定这是否有效编辑，它显然会工作。

var img = document.getElementsByTagName('img');
for(var i = 0; i < imgs.length ; i++) {
    if (img[i].width > 2) {
        // Do your thing
    }
}

if (document.getElementById('#theone').width() > 2) {
        // Do your thing
}

var img = $('img');
for(var i = 0; i < imgs.length ; i++) {
    if (img[i].width > 2) {
        // Do your thing
    }
}

if ($('#theone').width() > 2) {
        // Do your thing
}