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

实际上在 case 中，您的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");
    });
});

jquery在控制台中工作，但不在链接的js文件中

2 个答案: