Two methods of cyclizing through Ajax queries for jQuery Then When - for use?

Question

I have a deceptively simple blog project in works where I try to combine Isotope JQuery (for layout / filtering / sorting), Infinite scroll and dynamically load all blog fragments via Ajax (so filtering and sorting applies to all excerpts before the user scrolls the page down (after which they are loaded into the house and then available)).

This question primarily relates to obtaining data from the extract from the blog via Ajax, which are then transferred to the isotope filtering code. I'm not sure of the best way to do this, but I'm currently trying to scroll through each page (excerpts from blog posts) using an ajax request, and then access the data as one.

I came across two different methods to loop through ajax requests, each of which used then when jquery statements. The first uses a method that gives an answer to this SO , the other simply puts the entire then when statement inside the $.each .

Method 1:

  var pageCount = 15; var pageCountArray = []; for (var i = 1; i != pageCount; ++i) pageCountArray.push(i); var deferreds = []; $(pageCountArray).each(function() { var pageNumber = this; deferreds.push( $.get('/page/' + pageNumber) ) $.when.apply($, deferreds) .then(function(data){ console.log(data); // this outputs data as a string from the first page, then a list of objects console.log(typeof(data)); // string // 13 - object }); }); 

A little aside: any ideas as to why this outputs a single line and then objects?

Method 2:

  var pageCount = 15; var pageCountArray = []; for (var i = 1; i != pageCount; ++i) pageCountArray.push(i); $(pageCountArray).each(function(data) { var pageNumber = this; $.when( $.get('/page/' + pageNumber) ).then(function() { console.log(data); // this outputs 14 strings of data console.log(typeof(data)); // 14 - string }) }); 

I haven't figured out how to include Ajaxed data in my isotope filter function yet, but I think I need to parse this in HTML first. Still getting my JavaScript support ... in which case is one of these data types (objects versus strings) easier to parse in HTML? I believe the key to my answer?

Significant obligation to understand.

PS: Bonus points for those who may know the best way to achieve this in a different way, which somehow approaches the Isotope / Infinite Scroll (perhaps in a way that is more designed to play with these plugins ... I was unsuccessful search).

PPS: The second method seems cleaner ... does anyone know the reason that this is not a very good approach (using when then inside the .each loop)?

Answer 1

Wow, this is a question with a large degree of coverage, it is not surprising that there are no answers. This is a serious question, so I will do my best to help. I have created many sites that include isotope sorting / filtering when using AJAX preload with infinite scroll, so here is one of the simplest examples that I have already written ...

Firstly, I have to mention that it all works much better with the David DeSandro ImagesLoaded plugin . This happens mainly because it allows you to place a callback function (the function must be executed after the event occurs) associated with the event of loading the final image in this container. Wow, that was verbosity. How to do it better ... Basically it asks the container, you have not booted yet? Not? How about now? Are you uploaded? So do this function now ...

With this being implemented, I would start with this code in my onLoad event, for example ...

 $(function() { extendJQ_PreLoad(); //I Will Get To This Function In A Min //Use ImagesLoaded Plugin To Control Load Time Sync $(container).imagesLoaded(function() { cont.isotope({ itemSelector: ".box", //This is the class I use on all my images to sort layoutMode: "masonry", isOriginLeft: true, isFitWidth: true, filter: "*", masonry: { columnWidth: ".box" } }); preLoadNextImgSet(); //I Will Get To This Function In A Min }); }); 

So let it break. The ImagesLoaded plugin stops creating an isotope plugin instance before images for sorting / filtering / loading and / or processing appear. This is step 1. Step 2 will be to then begin consideration of the actual creation of the isotope plug-in. I say that I use the Masonry plugin as the layout style, and then I pass the object literal with the parameters under the "Freemasonry" key. The array key here, called Freemasonry, is the same as any instance you used to make in the past with a stand-alone Freemasonry plugin (non-isotope or isotope-2).

Step 3, to see here, will be my start of the call to extendJQ_PreLoad(); . This function is a function that I wrote to let JQuery know that I need to extend its kernel functionality in order to preload any images that I give them as an array. So ...

 function extendJQ_PreLoad() { $.preloadImages = function(args) { for (var i = 0; i < args.length; i++) { $("<img />").attr("src", args[i]); } } } //end function 

It's just a simple iterator and nothing out of the ordinary; it allows you to preload images using a neat trick associated with the DOM. If you load images in this way, it is then loaded into memory, but not into the DOM, that is, it is loaded and hidden. After you paste this image anywhere, it will be inserted very quickly, since it is now loaded into the cache and awaiting placement. You can learn more about this here .

Finally, the last thing I look at is my call to my preload function. This is a very simple php file call that just goes and searches for the next set of images in order if they can be found. If it receives some images, then it starts adding it to a temporary div in memory (again, not on the DOM to be seen) and is now set up to simply bypass the DOM. Let me look at a function to analyze its functionality ...

 function preLoadNextImgSet() { $.post('AjaxController/ajaxPreload_Gallery.php', {currStart: start, currSize: loadSize}, function(data) { if(data!="") { var y = $(document.createElement("div")).append(data).find("a"), found = []; y.each(function() { found[found.length] = "img/gallery/" + $(this).text(); }); $.preloadImages(found); } }); } //end function 

In this example, I have two global variables living in my browser window with JavaScript that I would declare. A start and a loadSize . The start variable represents the current location in our list of images that we are currently in, and the loadSize variable sets a limit on the number of images that are preloaded every time.

Now that the variables are set and sent to the PHP file using the $.post function, we can use the PHP file to find the corresponding images in order and load them into memory that is waiting to be used. Everything that returns here to the y variable gets iterated using the each function, and then preloaded. After this function exits, the volume of the imaginary div will be deleted and sent to the garbage, because it is not used simply iteratively.

Ok now. It was a trip, but we are almost ready to begin the final method here. Let me first go back and see what the first call of imagesLoaded made now that we know the new functionality added to these functions. The imagesLoaded call in the DOM-Ready event has a call at the very bottom that preloads the images ... why? This is because, as soon as the page loads and the original images are loaded into the isotope container, we need a page to use this downtime to start loading the next set. Thus, in other words, as soon as the images are placed, sorted and happy to just sit there, the next number of loadSize images will be loaded and waiting for you to place them.

Now for the final function. This function is a common function, the sole purpose of which is to officially upload the current preloaded images to the DOM, and then request to download the next set. Whatever this function is called? Here it becomes more useful to us lazyloading or infinitescroll. Somewhere on your page you need to add this function to ...

  $(window).scroll(function(){ scrollTop = $(window).scrollTop(), windowHeight = $(window).height(), docuHeight = $(document).height(); //AJAX Data Pull if(((scrollTop + windowHeight)+35) >= docuHeight){ getNextImages(); } }); 

This function is a magic function that allows the effect of infinitescroll. I added 35 pixels or so (+35 by accident in my code), because sometimes you want it to load closer to the end of the page, but not quite to the actual end of the page.

So, now that this happens, when we get to the end of the page, this function will want to get all the subsequent images as a whole, as we already mentioned. My function looks like this ...

 function getNextImages() { cont = $(container); $.post('AjaxController/ajaxPortfolio_Gallery.php', {currStart: start, currSize: loadSize}, function(data) { if(data!="") { //Append New Photos Inside <a> Element Tag var y = $(document.createElement("div")).append(data).find("a"); cont.append(y); //Fix Image Layouts cont.imagesLoaded(function() { //Feed Isotope Layout The New Items cont.isotope("appended", y); cont.find("a").css({"opacity":"1"}); }); } else { unFilled = false; } }); } 

I turned on the unFilled variable just so that a flag appears that can be set when you reach the end of the images. You do not want it to continue to try to download forever if there are no images left to display.

So good. This is a lot of information, so I will try to answer as much as possible.