网站在手机上的第二次加载有所不同

Question

我正在创建一个个人网站，并发现了一个错误，该错误会在我的Firefox或Chrome浏览器上使用Android手机时首次正确加载该页面，但是当我刷新该页面时会加载不同的错误。

我正在使用jQuery动态确定视口的大小，因此将内容正确地定位在视口下方。 最终发生的事情是该函数似乎以0的高度查看图像，并将内容放在页面的顶部，而不是将其放置在图像下方。 如果我向下滚动页面然后向上滚动，图像就在那里。

在我的桌面上不会发生这种情况，因此似乎是特定于移动设备的。

执行动态大小调整的jQuery函数如下。

// This line simply puts the content below the image at either the viewport height 
// or the image height, depending on whether the image height is larger than the viewport
var height = $(window).outerHeight() < $('.jumbotron-img').innerHeight() ? $(window).outerHeight() : $('.jumbotron-img').innerHeight();
$('#header-img-container').css('height', height);

对应的HTML

</div>
<div id='header-img-container'>
    <img src='images/site_skyline.jpg' class='img-fluid jumbotron-img'>
    <h1 class='d-flex justify-content-center fixed-top' id='main-header'>My Name</h1>
</div>

Answer 1

发生这种情况的原因是，在加载图像之前，您似乎正在获取容器的高度。 在您的浏览器中，图像可能以某种方式缓存，这就是为什么您看不到与移动设备相同的原因。

为了确保所有内容都已加载并获得正确的容器高度，可以在window.load()方法内调用函数。

根据您的jQuery版本，您可以执行以下操作：

$( window ).load(function() {
  var height = $(window).outerHeight() < $('.jumbotron-img').innerHeight() ? $(window).outerHeight() : $('.jumbotron-img').innerHeight();
  $('#header-img-container').css('height', height);
});

另外，如果您要针对特定​​图像进行优化，则可以仅在加载图像时调用load方法。

$( ".jumbotron-img" ).load(function() {
  alert('image loaded');
}); 

您可能需要使用一个ID来避免使用类jumbotron-img，以防万一，并且需要具体说明。

你可以在这里找到更多关于.load() 信息