JQuery lazy-load image and video not working

I am trying to lazy load an image and video file using jQuery following the example from the URL below:

https://varvy.com/pagespeed/defer-videos.html

https://varvy.com/pagespeed/defer-images.html

The problem is my paged data was loaded onScroll

with jQuery, but all of my images and videos weren't loaded. How can I solve this?

[Pagination]

$(window).on('scroll',function() 
{
if($(window).scrollTop() + $(window).height() == $(document).height()) {
  page += 1;
  if(page <= maxPages){
    $.ajax({
        beforeSend: function()
        {
            $('.loader').html('Loading....');                
        },    
        type: 'GET',
        url: 'blog/postloader?page=' + page,
        data: {'page':page},
        cache: false,
        success: function(data) {
            $('.loader').html('Load More...');
            $('.blogItems').append(data);
       }
    });
  }
  else{$('.loader').html('No More Post Available');} 
}

      

        
        
        
      

    

[Lazy bootloader function]

// Lazy Load Image
function delayImg() {
var imgDefer = document.getElementsByTagName('img');
for (var i=0; i<imgDefer.length; i++) {
if(imgDefer[i].getAttribute('data-src')) {
imgDefer[i].setAttribute('src',imgDefer[i].getAttribute('data-src'));
} } }
//window.onload = delayImg;

// Lazy Load Video
function delayVid() {
var vidDefer = document.getElementsByTagName('iframe');
for (var i=0; i<vidDefer.length; i++) {
if(vidDefer[i].getAttribute('data-src')) {
vidDefer[i].setAttribute('src',vidDefer[i].getAttribute('data-src'));
} } }
//window.onload = delayVid;

function start() {
  delayImg();
  delayVid();
}
window.onload = start;