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

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