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

Question

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 :

are you passing the autoplay param? https://stackoverflow.com/a/7286526/8526705 — Dacre Denny, Nov 27 '18 at 21:34
unfortunately No, But i am not asking about play (autoplay) videos , what I am asking for is Loading the video from youtube — Ibtissam Ibtissama, Nov 27 '18 at 22:07

score 3 · Accepted Answer · answered Nov 27 '18 at 20:30

3

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>

answered Nov 27 '18 at 20:30

Taplar

24,788
4
22
35

thank you , this solution worked for me...but with $( window ).load(function() { ... }); – Ibtissam Ibtissama Nov 27 '18 at 22:50
@IbtissamIbtissama `.load()`, when used with a callback function, is short hand for `on('load')`. They are the same thing. – Taplar Nov 28 '18 at 15:11

score 1 · Answer 2 · answered Nov 27 '18 at 20:51

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>

MD. Jubair Mizan · Answer 3 · 2018-11-27T20:36:05.203

0

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

edited Nov 27 '18 at 20:36

answered Nov 27 '18 at 20:34

MD. Jubair Mizan

1,539
1
12
20

why are you redirecting to the homepage? – Dacre Denny Nov 27 '18 at 20:34
Dear it's will not redirect anywhre it's just show to your fixed div after 5 seconds – MD. Jubair Mizan Nov 27 '18 at 20:35
1

Are you sure that video in hidden div doesn't loaded? – Mohammad Nov 27 '18 at 20:37
your original answer had the script "redirecting to homepage". Calling `show()` won't invoke video playback as required. – Dacre Denny Nov 27 '18 at 20:37
No dear it's will loaded but not display on 5 seconds . If you want to load a full div or content after full page load then you have to call ajax . – MD. Jubair Mizan Nov 27 '18 at 20:39
I m sorry but I already tried this , it load the videos + its make the div invisible for 5s....I do not want to load the youtube videos till the whole page is loaded....I do not want to execute the #div2 , but thank you :D – Ibtissam Ibtissama Nov 27 '18 at 20:40
Dude if you want to load youtube vedio after page load then you have to work with ajax. it's can work on fixed element after page load. – MD. Jubair Mizan Nov 27 '18 at 20:42

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

3 Answers3