javascript - 第一次加载页面时脚本不起作用

Question

我的 js 脚本在设置页面上图像的高度时遇到问题。

看起来像这样:

var $bigImages = $('.js-big-image'),
    $quotes = $('.js-quote'),
    $quoteImages = $('.js-quote-image');

        if (window.innerWidth >= 460) {
            $bigImages.each(function (index) {
                var imgHeight = $(this).height() / 2;
                $($quotes[index]).height(imgHeight);
                $($quoteImages[index]).height($quoteImages[index] / 2);
            });
        }

当我第一次进入页面时，图像获取height:0px;，但是当我重新加载页面图像时，图像获取从脚本计算的高度。

当用户第一次来时就会发生这种情况。当我使用 chrome 隐身窗口时，问题存在，因此仅第一次发生，重新加载后一切正常。

非常感谢您提供解决方案。

Answer 1

在执行脚本之前确保页面已完全加载

通过将代码扭曲到 ready 来做到这一点功能

$(document).ready(function () {
    var $bigImages = $('.js-big-image'),
    $quotes = $('.js-quote'),
    $quoteImages = $('.js-quote-image');

    if (window.innerWidth >= 460) {
        $bigImages.each(function (index) {
            var imgHeight = $(this).height() / 2;
            $($quotes[index]).height(imgHeight);
            $($quoteImages[index]).height($quoteImages[index] / 2);
        });
    }
});