javascript - jquery 在控制台中有效，但在链接的 js 文件中无效

Question

我正在使用 jQuery 脚本根据它们的尺寸添加一个类(纵向或横向)。然后我使用 jQuery 将图像垂直居中。当我将脚本传递到控制台时，该脚本可以完美运行，但当我将它链接到文档头时却无法正常运行。这是我的代码:

jQuery( document ).ready(
    function() {
        jQuery(".imgResize").each( function () {
            var $this = jQuery(this);
            if ( $this.width() > $this.height() ) {
                $this.addClass("landscape");
            } else if ( $this.width() < $this.height() ) {
                $this.addClass("portrait");
            } else {
        }
        var $h = $this.height();
        $this.css('margin-top', + $h / -2 + "px");
    });
});

什么会导致这个问题？

Answer 1

需要等待图片加载完毕

jQuery(document).ready(function () {
    jQuery(".imgResize").on('load', function () {
        var $this = jQuery(this);
        if ($this.width() > $this.height()) {
            $this.addClass("landscape");
        } else if ($this.width() < $this.height()) {
            $this.addClass("portrait");
        } else {

        }
        var $h = $this.height();
        $this.css('margin-top', +$h / -2 + "px");
    });
});