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

Question

I have a problem with my js script to set height of images on my page.

It looks like this:

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

When I go to page first time, images gets height:0px; , but when I reload page images gets height calculated from script.

It's happening when user come first time. When I use chrome incognito window, the problem exist, so it's happening only first time, after reload everything is fine.

Many thanks for solutions.

Answer 1

Make sure the page is completely loaded, before executing the script

do this by warping your code into the ready function

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