Here’s some example code, I would like to prioritise “div1” to load before anything else does.
JavaScript
x
11
11
1
<HTML>2
<body>3
<div id="div1">This div will load first please</div>4
<img src="/" title="Other large images">5
<img src="/" title="Other large images">6
<img src="/" title="Other large images">7
<img src="/" title="Other large images">8
<img src="/" title="Other large images">9
</body>10
</html>11
Advertisement
Answer
Just via HTML you cannot prioritize what will load first on your web page.
The page loads from the Top to Down approach, which first <HEAD> and its content, then <BODY> and its content.
If you like to render a page according to your need you need to use JavaScript.
Below sample code below does the same.
JavaScript
1
26
26
1
window.onload = function(){2
3
const div1 = `<div id="div1">This div will load first please</div>`;4
setTimeout(() => {5
console.log("DIV1 load after 3 second");6
document.getElementById("the-div-1").innerHTML = div1;7
}, 3000); 8
9
const imgs = `10
<img src="https://picsum.photos/id/237/200/300.jpg" title="Other large images">11
<br />12
<img src="https://picsum.photos/id/238/200/300.jpg" title="Other large images">13
<br />14
<img src="https://picsum.photos/id/237/200/300.jpg" title="Other large images">15
<br />16
<img src="https://picsum.photos/id/240/200/300.jpg" title="Other large images">17
<br />18
<img src="https://picsum.photos/id/241/200/300.jpg" title="Other large images">19
<br />20
`;21
22
setTimeout(() => {23
console.log("Images load after 6 second");24
document.getElementById("image-div").innerHTML = imgs;25
}, 6000); 26
}JavaScript
1
14
14
1
<html>2
3
<body>4
<div>5
<span>Anything in HTML file will load from top-down apporach.</span>6
</div>7
8
<div id="the-div-1"></div>9
10
<div id="image-div"></div>11
12
</body>13
14
</html>