CODEWITHSUNDEEP
javascriptphpjqueryhtmlajax
Ibtissam Ibtissama
Ibtissam Ibtissama

Reputation: 179

How to run the Div element when the page load is complete

I have an Html page containing multiple div, something like that :

<div id="div1">div1</div>
<div id="div2">div that contains youtube videos </div>
<div id="div3">div3</div>

I want to execute the #div2 after the page is loaded, is there any way to do that.

PS: I want to load the whole page firstly after that I want to load the #div2 ( and that because #div2 contains youtube videos which make the load very slow.

I find some code examples :

Upvotes: 1

Views: 2116

Answers (3)

Mohammad
Mohammad

Reputation: 21489

Store URL of iframe in custom data attribute data-src and after page load insert it into src attribute of iframe.

$(function(){
  $("#div2 iframe").attr("src", function(){
    return $(this).data("src")
  }).parent().show();
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="div1">div1</div>
<div id="div2" style="display:none">
  <iframe src="" data-src="http://youtube.com"></iframe>
</div>
<div id="div3">div3</div>

Upvotes: 1

MD. Jubair Mizan
MD. Jubair Mizan

Reputation: 1560

Make it invisible when page load

<div id="div1" style="display:none">
  <p><em>Your Desired div will show after 5 second(s).</em></p>
</div>

Then make it visible after 5 secods on page loaded:

$(function(){
  setTimeout(function(){
    $('#div1').show();
  },5000);
});

Hope this will help you

Upvotes: 0

Taplar
Taplar

Reputation: 24965

You could potentially use a script template as the default element, and then replace it on page load.

$(window).on('load', function () {
  var $div2 = $('#div2');
  
  $div2.replaceWith( '<div id="div2">'+ $div2.html() +'</div>');
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="div1">div1</div>
<script type="text/html" id="div2">div that contains <b>youtube</b> videos </script>
<div id="div3">div3</div>

Upvotes: 3

Related Questions