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>