CODEWITHSUNDEEP
javascripthtmlcssloading
ekv_56
ekv_56

Reputation: 25

Prioritise a div or image to load first

Here's some example code, I would like to prioritise "div1" to load before anything else does.

<HTML>
<body>
<div id="div1">This div will load first please</div>
<img src="/" title="Other large images">
<img src="/" title="Other large images">
<img src="/" title="Other large images">
<img src="/" title="Other large images">
<img src="/" title="Other large images">
</body>
</html>

Upvotes: 1

Views: 1695

Answers (2)

Not A Robot
Not A Robot

Reputation: 2694

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. 

window.onload = function(){
   
   const div1 = `<div id="div1">This div will load first please</div>`;
   setTimeout(() => {
     console.log("DIV1 load after 3 second");
     document.getElementById("the-div-1").innerHTML = div1;
   }, 3000); 
   
   const imgs = `
      <img src="https://picsum.photos/id/237/200/300.jpg" title="Other large images">
      <br />
      <img src="https://picsum.photos/id/238/200/300.jpg" title="Other large images">
      <br />
      <img src="https://picsum.photos/id/237/200/300.jpg" title="Other large images">
      <br />
      <img src="https://picsum.photos/id/240/200/300.jpg" title="Other large images">
      <br />
      <img src="https://picsum.photos/id/241/200/300.jpg" title="Other large images">
      <br />
   `;

  setTimeout(() => {
     console.log("Images load after 6 second");
     document.getElementById("image-div").innerHTML = imgs;
   }, 6000); 
}
<html>

<body>
  <div>
    <span>Anything in HTML file will load from top-down apporach.</span>
  </div>
  
  <div id="the-div-1"></div>
  
  <div id="image-div"></div>
  
</body>

</html>

Upvotes: 1

Azure
Azure

Reputation: 136

Use document.onload
Documentation

<div id="a"><!--other stuff--></div>
<div onload="loadOtherContent()">IMPORTANT DIV</div>
<div id="b"><!--other stuff--></div>
<script>
const loadOtherContent = () => {
    //load those other stuff
    document.getElementById("a").innerHTML = "...";
    document.getElementById("b").innerHTML = "...";
    //...
}
</script>

Upvotes: 1

Related Questions