Hey Guys.

 

Im using this for a site http://www.infotuts.com/ajax-infinite-scroll-using-jquery-php-mysql/

 

However the load is lagging ALOT.

 

Sometimes I go to the bottom and have to scroll up and down the page to get it to actually load more.

 

Im hoping its my internet connection to be honest.

 

Im still learning Javascript so if possible can some please have a little look at this.

 

Thanks

 var ajax_arry=[];
 var ajax_index =0;
 var sctp = 100;
 $(function(){
   $('#loading').show();
 $.ajax({
	     url:"scroll.php",
                  type:"POST",
                  data:"actionfunction=showData&page=1",
        cache: false,
        success: function(response){
		   $('#loading').hide();
		  $('#demoajax').html(response);
		   
		}
		
	   });
	$(window).scroll(function(){
       
	   var height = $('#demoajax').height();
	   var scroll_top = $(this).scrollTop();
	   if(ajax_arry.length>0){
	   $('#loading').hide();
	   for(var i=0;i<ajax_arry.length;i++){
	     ajax_arry[i].abort();
	   }
	}
	   var page = $('#demoajax').find('.nextpage').val();
	   var isload = $('#demoajax').find('.isload').val();
	   
	     if ((($(window).scrollTop()+document.body.clientHeight)==$(window).height()) && isload=='true'){
		   $('#loading').show();
	   var ajaxreq = $.ajax({
	     url:"scroll.php",
                  type:"POST",
                  data:"actionfunction=showData&page="+page,
        cache: false,
        success: function(response){
		   $('#demoajax').find('.nextpage').remove();
		   $('#demoajax').find('.isload').remove();
		   $('#loading').hide();
		   
		  $('#demoajax').append(response);
		 
		}
		
	   });
	   ajax_arry[ajax_index++]= ajaxreq;
	   
	   }
	return false;
	
 if($(window).scrollTop() == $(window).height()) {
       alert("bottom!");
   }
	});

});
	  

the scroll.php

<?php
include('db.php');

 if(isset($_REQUEST['actionfunction']) && $_REQUEST['actionfunction']!=''){
$actionfunction = $_REQUEST['actionfunction'];
  
   call_user_func($actionfunction,$_REQUEST,$con,$limit);
}
function showData($data,$con,$limit){
  $page = $data['page'];
   if($page==1){
   $start = 0;  
  }
  else{
  $start = ($page-1)*$limit;
  }
  
  $sql = "select * from scenery order by id DESC limit $start,$limit";
  $str='';
  $data = $con->query($sql);
  if($data!=null && $data->num_rows>0){
   while( $row = $data->fetch_array(MYSQLI_ASSOC)){
      $str.="<div class='data-container'><div id=\"main-container\"><div style=\"background-repeat: no-repeat; background-size: 95%; background-position:center  center;  background-image: url('". $row['photograph_url'] . "'); min-height:350px; \">

</div>
<h3>
" . $row['name'] . " </h3>
</div></div>";
   }
   $str.="<input type='hidden' class='nextpage' value='".($page+1)."'><input type='hidden' class='isload' value='true'>";
   }else{
    $str .= "<input type='hidden' class='isload' value='false'><h3>Yay you got to the bottom... Now press CTRL + R on your keyboard!</h3>";
   }
  
   
echo $str; 

}

?>

It is as if your scrollbar has to go to back to the top of the page for it to then load more at the bottom. Doesnt make sense?

opp's Sorry

 

heres the page http://chantellelander.co.uk/mediaone/interiography/

That plugin isn't really written very well if you have scroll performance in mind, it's declaring variables and attaching them to dom nodes inside a window.scroll event, that stuff should be done outside of the scroll event. As soon as I see bad practices like that I look elsewhere, it's likely the rest of the code is also poorly written.

 

Why not just put a load more button? This, in my opinion is preferable behaviour to an infinite scroll (even one that is well written).

Edited February 5, 201511 yr by rbrtsmith

By the way as your window gets more narrow your header content starts to overlay your main content. might wanna look into that

By the way as your window gets more narrow your header content starts to overlay your main content. might wanna look into that

LOL, Havent even bothered with the responsive css yet lol.

Why not just put a load more button? This, in my opinion is preferable behaviour to an infinite scroll (even one that is well written).

 

A much better idea. The other thing I think the 'extending results' methods could do with is section dividers for each new set added, some visual way to trace back to a product you were looking at 3 'show more' clicks ago. I know I use #id for back to results so both the js and non js users can get back to the position they were before clicking 'more info'.

Edited February 6, 201511 yr by BrowserBugs

There's always pagenation too, that can work quite well. it's what I go with on my blog. but mine isn't using ajax, no need when you use Jekyll, the page-load is almost instantaneous

That plugin isn't really written very well if you have scroll performance in mind, it's declaring variables and attaching them to dom nodes inside a window.scroll event, that stuff should be done outside of the scroll event. As soon as I see bad practices like that I look elsewhere, it's likely the rest of the code is also poorly written.

 

Why not just put a load more button? This, in my opinion is preferable behaviour to an infinite scroll (even one that is well written).

 

The PHP isn't great either. Putting HTML inside a string can be a nightmare to maintain and refactor. Both of these should be separated out, or ideally your application would use some kind of templating language.

 

The PHP isn't great either. Putting HTML inside a string can be a nightmare to maintain and refactor. Both of these should be separated out, or ideally your application would use some kind of templating language.

 

My PHP skills are basic at best, thanks for pointing that out

My PHP skills are basic at best, thanks for pointing that out

 

From a frontend view, imagine getting a redesign project, and the code looks something like this:

 if($data!=null && $data->num_rows>0){
   while( $row = $data->fetch_array(MYSQLI_ASSOC)){
      $str.="<div class='data-container'><div id=\"main-container\"><div style=\"background-repeat: no-repeat; background-size: 95%; background-position:center  center;  background-image: url('". $row['photograph_url'] . "'); min-height:350px; \">

</div>
<h3>
" . $row['name'] . " </h3>
</div></div>";
   }
   $str.="<input type='hidden' class='nextpage' value='".($page+1)."'><input type='hidden' class='isload' value='true'>";
   }else{
    $str .= "<input type='hidden' class='isload' value='false'><h3>Yay you got to the bottom... Now press CTRL + R on your keyboard!</h3>";

It would take forever to work out, you would be accidentally deleting stuff, and it would be difficult to add and remove elements. It's much easier to let the PHP handle the business logic, and separate the frontend out. Just as an example, here's Wordpress with the Twig templating language http://upstatement.com/timber/, it's so much cleaner to work with.

 

The PHP isn't great either. Putting HTML inside a string can be a nightmare to maintain and refactor. Both of these should be separated out, or ideally your application would use some kind of templating language.

 

Hell yeah. PHP is sweet for determining what's incoming to the page but I see no need to actually store html in a string for most cms. A simple <?php echo $x['name']; ?> inside your html makes it easier for the front end team to as they can just move the php inside whatever element they want without hounding the poor dev to do it for them

I totally agree with what you both are saying there.

 

Similar issues with JavaScript which is why a templating framework like Hnadlebars can be useful, although I can see where the PHP wouldn't benefit too much from this approach as we are trying to keep front-end-y stuff out of the backend.