jquery - 如果语句不起作用，则 jquery 高度/宽度

Question

$(window).load(function () {

    var $imgs = $('.boxInner img');

    $imgs.each(function () {
        var w = $(this).clientWidth;
        var h = $(this).clientHeight;

        if (w < h) { $(this).css("display","none"); };
    });
});

我试过用很多不同的方式写这个，但都无济于事。基本上，只看图片的宽度和高度。如果高度大于宽度，则将显示变为无。有人请帮我解决这个问题。应该这么简单。

Answer 1

要么使用 dom 对象及其 api：

$imgs.each(function () {
    var w = this.clientWidth;
    var h = this.clientHeight;

    if (w < h) { $(this).css("display","none"); };
});

或使用 jQuery 对象及其 api：

$imgs.each(function () {
    var w = $(this).width();
    var h = $(this).height();

    if (w < h) { $(this).css("display","none"); };
});

Answer 2

// you want $(window).load() because you need to make sure your images are loaded before you can run this function
$(window).load(function (){
    var imgs = $('.boxInner img');

    if (imgs.length){
        $.each(imgs, function (index, item){
            var w = item.width(),
                h = item.height();

            if (w < h) { 
                item.css({display: "none"}); 
            }
        });
    }
});

Answer 3

正如我在评论中所写，如果您使用 window.load，您必须等待页面的所有资源都加载完毕。您可以将 image.complete 与 $(image).load(function() 结合使用做得更好......或者寻找网络上很多的图像加载器插件。