Why browser waits for images to load still after you click to another page?

I'm trying to understand some basic HTML / HTTP behavior.

Given the following very simple HTML code:

<html>
        <head></head>
        <body>
                <a href="page2.php" >Page 2</a>     
                <img src="sample.jpg" />
        </body>
</html>

If the image takes around 20 seconds to load, and during that time you click on the link to another page, the browser does not immediately navigate away but waits for sometime. The situation becomes more extreme if there many images on the page.

Why is that? Is this correct behavior or am I missing something?

I can solve this problem by calling window.stop() on click event but I just can't believe this is actually required!

Solution

Unless a page fully loads links should not navigate and that is correct browser behavior!

So clicking a link while the tab is still in “Loading…” stage, should not do anything but you can always rewrite your code in a way that defers operations that may take too long to complete, like this...

<html>

 <head></head>


 <body onload=”LoadImages();”>


 <script>

 function LoadImages(){ // defer image loading, one can also add a delay

  Img1.src='https/someplace/image1.jpg';

  Img2.src='https/someplace/image2.jpg';

 }

 </script>


   <a href="page2.php" >Page 2</a>     

   <img id="Img1" src="about:blank" />

   <img id="Img2" src="about:blank" />


 </body>


</html>

What we have achieved here is that the document will now load faster, the links become operable early on, while images are trying to sort themselves out in the background.

There's another easier way if you've only got one or two images...

<img src="x" onerror="this.onerror=null; this.src='https/someplace/image1.jpg';"/>

This too will make the page load faster and allow links to operate while the image is sorting itself out in the background.

The aim is to prevent large images from locking up a page load by making them lose their priority and load later.