CODEWITHSUNDEEP
javascriptphphtmljquery
S M Khirul Alam
S M Khirul Alam

Reputation: 47

How to lazy load videos with jquery or javascript

So I am trying to the load a embed video after a image(Splash-Imag) is clicked. The Delay should be 1.5 Seconds

    <div id="mv-info">
  
    <div id="content-embed" style="<?php $splash = info_movie_get_meta('fondo_player'); if(empty($splash)) { echo 'display:block;';}?>">
<div class="mplay">

<?php if (get_sub_field('type_player') == "p_iframe") {?>
<?php if($dato = get_sub_field('embed_player')) {  ?>
    <iframe src="<?php echo $dato; ?>" frameborder="0" allowfullscreen></iframe>
<?php }?>
</div>

Here $dato is the embed URL, Once I click the splash-image(class) in div class mvi-info the splash image goes and video pops out. But what i want to do is delay the video for 1.5 seconds or less so that it doesn't hinder my page speed.

I used this code but it doesn't seem to work

<script type="application/javascript">
   $('.mvi-cover').click(function(){
var iframe = $('.mplay iframe').each(function(item){
    var src= $(this).data('src');
 $(this).attr("src",src);
    
});

$( ".splash-image" ).fadeOut(function(){
    $( ".splash-image" ).remove()
});
$('#content-embed').fadeIn();
})

</script>

If anyone can help me then I will be really grateful.

Upvotes: 1

Views: 1258

Answers (3)

S M Khirul Alam
S M Khirul Alam

Reputation: 47

This code works fine for delay for one source. But not able to get it right for multiple sources.

 <div class="mplay">
    
    <?php if (get_sub_field('type_player') == "p_iframe") {?>
    <?php if($dato = get_sub_field('embed_player')) {  ?>
    <script>
        window.setTimeout(function () {
            var iframe = document.getElementById('myIframe');
            iframe.setAttribute('src', '<?php echo $dato;?>');
        }, 1500);    
    </script>
    
    
        <iframe id="myIframe" src="" frameborder="0" allowfullscreen></iframe>
    <?php }?>

Upvotes: 0

Louys Patrice Bessette
Louys Patrice Bessette

Reputation: 33933

You could use some jQuery objects to load the iframes without appending them to DOM. And using a timeout, you could do this 1,5 second after the page has finished loading.

Then, on a click event, change the src attribute of the iframe next to the clicked splash image (not all). Since the browser already has loaded the content, it will be instantanous.

I am pretty sure you have many iframes like this because you use a PHP loop. DO NOT use id in that kind of loop that produces HTML. It ends up in multiple time the same id. Use classes instead.

Try that to load the iframes 1.5 sec after page load:

$(document).ready(function () {
  let iframes = $(".mplay iframe");

  setTimeout(function () {
    iframes.each(function (index) {

      console.log(`Looping through iframes... #${index+1}`)

      // Create a temporary jQuery object just to load
      let temp = $("<iframe>")[0];
      temp.src = $(this).data("src");
      
      // Make sure the content gets loaded
      temp.on("load", ()=> console.log(`The content of Iframe #${index+1} is loaded... The url was ${$(this).data("src")}`) )
    });
  },1500);
});

And this to handle the click events on the splash images:

$(".mvi-cover").click(function () {
  let src = $(this).data("src");
  $(this).attr("src", src);

  let embed = $(this).next(".content-embed");
  $(this).fadeOut(function () {
    $(this).remove();
    embed.fadeIn();
  });
});

I am not 100% sure of your rendered HTML structure... But you get the idea.

Upvotes: 2

Meowster
Meowster

Reputation: 657

Try this:

    <div id="mv-info">
    <?php   if($splash = info_movie_get_meta('fondo_player')) {?><a title="<?php the_title(); ?>" class="thumb mvi-cover splash-image" style="background-image: url(<?php echo $splash;?>)"></a><?php }?>
    <?php }?>
    <div id="content-embed" style="<?php $splash = info_movie_get_meta('fondo_player'); if(empty($splash)) { echo 'display:block;';}?>">
<div class="mplay">

<?php if (get_sub_field('type_player') == "p_iframe") {?>
<?php if($dato = get_sub_field('embed_player')) {  ?>
    <iframe data-src="<?php echo $dato; ?>" frameborder="0" allowfullscreen></iframe>
<?php }?>
</div>

<script type="application/javascript">
   $('.mvi-cover').click(function(){
var iframe = $('.mplay iframe').each(function(item){
    var src= $(this).data('src');
 $(this).attr("src",src);
    
});

$( ".splash-image" ).fadeOut(function(){
    $( ".splash-image" ).remove()
});
$('#content-embed').fadeIn();
})

</script>

Upvotes: 1

Related Questions