Question

图像源包含真实的图像尺寸（宽度/高度）。在具有5个图像的div#pics中，3个图像是16X16,2个图像是2x2。两个2x2图像都有一个应用于它们的类，使它们为16x16，其他3个图像为16x16。问题在于，当我以这种方式过滤时：

var Images = $('#pics img');
var FilteredImages = Images.filter(function(){
    return ($(this).width() == 16) || ($(this).height() == 16)
});

FilteredImages包含所有5个图像，因为它考虑了使2个2x2图像为16x16的类。 FilteredImages如何仅保留其源图像大小（不是css）的3个图像是16x16？

Answer 1

我建议：

var Images = $('#pics img'),
    FilteredImages = Images.filter(function(){
        var that = this;
        return (that.naturalWidth == '16px') || (that.naturalHeight == '16px')
    });

参考文献：

HTMLImageElement (naturalHeight and naturalWidth are in the table)。

Answer 2

$('#pics img[width=16][height=16]').css({border:'1px solid red'});

Answer 3

您可以将图像添加到临时对象以获取其原始大小：

function getImgSize(imgSrc) {
  var newImg = new Image();

  newImg.onload = function() {
    var height = newImg.height;
    var width = newImg.width;
    alert ('The image size is '+width+'*'+height);
  }

  newImg.src = imgSrc; // this must be done AFTER setting onload

}

请在此处查看答案： Determine original size of image cross browser?

jQuery - 根据实际大小过滤图像

3 个答案: