Join the social network of Tech Nerds, increase skill rank, get work, manage projects...
 
  • How to make lazy load of html page contents using Javascript

    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 343
    Comment on it

    Hello Reader's! If you are looking to make your website pages more dynamic and light that loads the html sections as user scrolls down, Then you can use the code below:-

    First thing is to make some corrections on the html page like. you need to set the html parts in section and with id's

    <header>
    <!your header parts , Now insert the part which you want to load on scroll>
    <div id="LoadAjax"></div>
    
    $(window).scroll(function(){
          if  ($(window).scrollTop() == $(document).height() - $(window).height()){
               AddMoreContent();
          }
     });    
    
     function AddMoreContent(){
          $.post('getMoreContent.php', function(data) {
               //Assuming the returned data is pure HTML
               $(data).insertBefore($('#LoadAjax'));
          });
     }
    

    Now you just need to store the ID in the Javascript variable that will pass to another function via ajax that will return next html content. Now make the Ajax call

      $.post('getMoreContent.php', 'lastId=' + lastId, function(data) {
         //In this function you have to return all of the html only for the div
           $(data).insertBefore($('#LoadAjax'));
      });
    

 0 Comment(s)

Sign In
                           OR                           
                           OR                           
Register

Sign up using

                           OR                           
Forgot Password
Fill out the form below and instructions to reset your password will be emailed to you:
Reset Password
Fill out the form below and reset your password: