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");
    });
});

Answer 2

实际上，在您的情况下，您的 jQuery 脚本在加载图像之前正在运行。所以，如果你想在加载图像后运行你的脚本。

然后你需要使用jQuery Load

解决方案

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");
    });
});