Page keep freezing on jQuery load more

Question

My page ui keep freezing each time the load more is fire once or multiple times to load more videos and all the videos play button get freeze/hang. Here is the PHP code

It unfreeze back only when data has loaded, Any help is appreciated. I have tried lots of solution by turning async to true but same freezing

    if(isset($_REQUEST["limit"], $_REQUEST["start"])){      
$sSQL='SELECT * from posts  WHERE 
    created_at >= DATE(NOW()) + INTERVAL
     -2 DAY
order by uni 
    ';
$result =   $db->getRecFrmQry($sSQL.' LIMIT '.$_REQUEST["start"].', '.$_REQUEST["limit"].' ');}
foreach($result as $val){
        ?>

It unfreeze back only when data has loaded using this jQuery code

$(document).ready(function(){
 var limit = 2;
 var start = 0;
 var action = 'inactive';
 function load_country_data(limit, start)
 {
  $.ajax({
   url:"listing-data.ajax.php",
   method:"GET",
   data:{limit:limit, start:start},
   cache:false,
   
   success:function(data)
   {
    $('#load_data').append(data);
    if(data == '')
    {
     $('#load_data_message').html("");
     action = 'active';
    }
    else
    {
     $('#load_data_message').html("");
     action = "inactive";
    }
   }
  });
 }

 if(action == 'inactive')
 {
  action = 'active';
  load_country_data(limit, start);
 }
 $(window).scroll(function(){
  if($(window).scrollTop() + $(window).height()+100 > $("#load_data").height() && action == 'inactive')
  {
   action = 'active';
   start = start + limit;
   setTimeout(function(){
    load_country_data(limit, start);
   }, 10);
  }
 });
 
});

mplungjan · Answer

It is expected that the interface stops responding while data is rendering.

Here is a version that is easier to debug

Do you get the console message only when you stop scrolling?

How many videos does the server return in one go?

I also recommend you do not return HTML from the server but just enough data to render the HTML on the client (an array of video URLs)

$(function() {
  const limit = 2;
  let start = 0;
  let active = false;
  let tId;
  const template = $("#vidDiv").html();
  const process = arr => {
    if (arr.length === 0) return; // nothing to process
    arr.forEach(vid => {
      const $div = $(template)
      $div.find("source").attr("src", `/ver/videos/${vid}`)
      $('#load_data').append($div);
    });  
  };
  const load_country_data = (limit, start) => {
    $.ajax({
      url: "listing-data.ajax.php",
      method: "GET",
      dataType: "json", 
      data: {
        limit: limit,
        start: start
      },
      cache: false,
      success: function(arr) { // always gets an array
        const active = arr.length === 0;
        $('#load_data_message').html(
          active ? "" : ""
        );  
        process(arr);
      }
    });
  }
  $(window).scroll(function() {
    if (active) return;
    const height = $("#load_data").height();
    const topHeight = $(window).scrollTop() + $(window).height() + 100;
    if (topHeight <= height) return;
    active = true;
    start += limit;
    clearTimeout(tId);
    tId = setTimeout(function() {
      console.log("New load",start); // this should only happen when you stop scrolling
      load_country_data(limit, start);
    }, 10);
  });
  load_country_data(limit, start);
});

using this php

= DATE(NOW()) + INTERVAL -2 DAY order by uni';
  $result =   $db->getRecFrmQry($sSQL.' LIMIT '.$_REQUEST["start"].', '.$_REQUEST["limit"].' ');
  foreach($result as $val) {
    $vids[] = $val['video'];
  }
}  
header('Content-Type: application/json; charset=utf-8');
echo json_encode($vids);
?>

Page keep freezing on jQuery load more

1 Answers