首次加载页面时脚本不起作用

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