Firefoxは視差の画像サイズを読み込みません（リフレッシュ時のみ）

Question

現在のFirefoxには奇妙なバグがあります。私はページをロードする場合、これはすべての罰金動作しますが、Firefoxでのみ動作

(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>

：私は、視差スクリプト（私はそれがマテリアライズから来ていると思います）、これはソースですが実行していますよ（またはキャッシュを削除してリロードする）。 通常（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