第一次加載頁面時腳本不起作用

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