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

Question

I am creating a personal website and found a bug where, using my Android phone on Firefox or Chrome, the page will load correctly the first time, but when I refresh the page it loads differently.

I'm using jQuery to dynamically determine the size of the viewport and therefore position the content below it correctly. What ends up happening is it appears that the function views the image with a height of 0 and puts the content at the very top of the page instead of positioning it below the image. If I scroll down the page and scroll back up, the image is there.

This does not happen on my desktop, so it seems mobile specific.

The jQuery function that is performing the dynamic sizing is as follows.

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

The corresponding 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

This occurs because you seem to be getting the height of the container before the image loads. In your browser, the image is probably cached in some way and that's why you don't see the same as in mobile.

To make sure everything is loaded and get the correct height of the container, you can call your function inside the window.load() method.

Depending on your version of jQuery you can do :

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

Alternatively, if you want to optimize for a specific image, you can call the load method when only the image loads... like this

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

You might want to use an id to avoid using the class jumbotron-img in case you have more than one and need to be specific.

You can find out more on .load() here