Firefox加載視差圖像大小錯誤（只刷新）

Question

我在當前的Firefox中有一個奇怪的錯誤。我運行一個腳本視差（我認爲它來自Materialise公司），這是源：

(function($) { 
 
    $.fn.parallax = function() { 
 
    var window_width = $(window).width(); 
 

 
    return this.each(function(i) { 
 
     var $this = $(this); 
 
     $this.addClass('parallax'); 
 

 
     $this.find('img').each(function() { 
 
     $(this).css('background-image', 'url(' + $(this).prop('currentSrc') + ')'); 
 
     $(this).attr('src', 'data:image/gif;base64,R0lGODlhAQABAIABAP///wAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw=='); 
 
     $(this).attr('srcset', ''); 
 
     }); 
 

 
     function updateParallax(initial) { 
 
     var container_height; 
 
     // if (window_width < 992) { 
 
     container_height = ($this.height() > 0) ? $this.height() : $this.children("img").height(); 
 
     // } 
 
     // else { 
 
     // container_height = ($this.height() > 0) ? $this.height() : 500; 
 
     // } 
 
     var img_height = $this.children("img").height(); 
 
     var parallax_dist = img_height - container_height; 
 
     var bottom = $this.offset().top + container_height; 
 
     var top = $this.offset().top; 
 
     var scrollTop = $(window).scrollTop(); 
 
     var windowHeight = window.innerHeight; 
 
     var windowBottom = scrollTop + windowHeight; 
 
     var percentScrolled = (windowBottom - bottom)/(container_height + windowHeight); 
 
     var parallax = -1 * parallax_dist * percentScrolled; 
 

 
     console.log(
 
      'img_height: ' + img_height + '\n' + 
 
      'parallax_dist: ' + parallax_dist + '\n' + 
 
      'bottom: ' + bottom + '\n' + 
 
      'top: ' + top + '\n' + 
 
      'scrollTop: ' + scrollTop + '\n' + 
 
      'windowHeight: ' + windowHeight + '\n' + 
 
      'windowBottom: ' + windowBottom + '\n' + 
 
      'percentScrolled: ' + percentScrolled + '\n' + 
 
      'parallax: ' + parallax + '\n' 
 
     ); 
 

 
     if ((bottom > scrollTop) && (top < (scrollTop + windowHeight))) { 
 
      $this.children("img").first().css('bottom', parallax + "px"); 
 
     } 
 
     if (initial) { 
 
      $this.children("img").first().css('display', 'block'); 
 
     } 
 
     } 
 

 
     // Wait for image load 
 
     $this.children("img").one("load", function() { 
 
     updateParallax(true); 
 
     }).each(function() { 
 
     if (this.complete) $(this).load(); 
 
     }); 
 

 
     $(window).scroll(function() { 
 
     window_width = $(window).width(); 
 
     updateParallax(false); 
 
     }); 
 

 
     $(window).resize(function() { 
 
     window_width = $(window).width(); 
 
     updateParallax(false); 
 
     }); 
 

 
    }); 
 

 
    }; 
 
}(jQuery));

.parallax-container { 
 
    position: relative; 
 
    overflow: hidden; 
 
    height: 500px; 
 
} 
 
.parallax { 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
    right: 0; 
 
    bottom: 0; 
 
    z-index: -1; 
 
} 
 
.parallax img { 
 
    display: none; 
 
    position: absolute; 
 
    bottom: 0; 
 
    width: 100%; 
 
    max-width: 100%; 
 
    min-height: 100%; 
 
    background-position: bottom; 
 
    background-size: contain; 
 
    background-repeat: no-repeat; 
 
}

<div class="full-parallax parallax-container"> 
 
    <div class="parallax"> 
 
    <img src="http://lorempixel.com/1000/1000/" srcset="http://lorempixel.com/1000/1000/ 2000w, http://lorempixel.com/500/500/ 500w" alt=""> 
 
    </div> 
 
</div> 
 

 
<div class="content"> 
 
    <h1>Hello!</h1> 
 
    <p>Text text text text text text</p> 
 
    <p>Text text text text text text</p> 
 
    <p>Text text text text text text</p> 
 
    <p>Text text text text text text</p> 
 
    <p>Text text text text text text</p> 
 
    <p>Text text text text text text</p> 
 
    <p>Text text text text text text</p> 
 
    <p>Text text text text text text</p> 
 
    <p>Text text text text text text</p> 
 
    <p>Text text text text text text</p> 
 
    <p>Text text text text text text</p> 
 
    <p>Text text text text text text</p> 
 
    <p>Text text text text text text</p> 
 
    <p>Text text text text text text</p> 
 
    <p>Text text text text text text</p> 
 
    <p>Text text text text text text</p> 
 
    <p>Text text text text text text</p> 
 
    <p>Text text text text text text</p> 
 
    <p>Text text text text text text</p> 
 
    <p>Text text text text text text</p> 
 
    <p>Text text text text text text</p> 
 
    <p>Text text text text text text</p> 
 
</div> 
 

 

 

 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 

 
<script> 
 
    $(document).ready(function() { 
 
    $('.parallax').parallax(); 
 
    }); 
 
</script>

這工作都很好，但在Firefox這僅適用於如果我加載頁面（或者通過刪除緩存重新加載）。 如果我正常重新加載頁面（F5），則視差無法正確加載（圖像太遠），直到我滾動第一個圖像爲止，然後圖像跳到正確的位置。

這個問題似乎是FF加載錯誤的圖像大小。在沒有緩存的情況下重新加載時，它讀取1707中相同圖像的圖像高度，並在正常重新加載緩存時讀取678.只要我開始滾動，該值跳到1707。

編輯：它也只發生，如果頁面滾動到絕對頂部，如果我向下滾動1px它正確加載圖像。

Chrome和Vivaldi做得很好。

Answer 1

不是一個合適的解決問題的方法，而是一種解決方法可能是觸發scroll事件是否可行，在頁面加載：

$(window).on("load", function(){ 
    $(window).trigger("scroll"); 
    });//window load 
}(jQuery));// last line of your code. Add the trigger code just above this line