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

或者，如果您想针对特定图像进行优化，只需加载图像即可调用加载方法......就像这样

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

您可能希望使用id来避免使用类jumbotron-img，以防您有多个并且需要具体。

您可以在.load() here

上找到更多信息

网站在第二次加载时在移动设备上加载不同

1 个答案: