问题描述
我有一个看似简单的博客项目工程，在这里我想汇集同位素jQuery的（布局/过滤/排序），无限滚动的，以及通过Ajax（所以筛选和排序被应用到所有博客摘录动态加载用户向下滚动页面之前所有的摘录（此后它们加载到DOM，然后访问））。
I've got a deceptively simple blog project in the works, where I'm trying to bring together Isotope Jquery (for layout/filtering/sorting), Infinite Scroll, and dynamic loading of all blog excerpts via Ajax (so filtering and sorting is applied to all excerpts before the user scrolls down the page (after which time they're loaded into the dom and then accessible)).
这个问题主要涉及通过Ajax获得博客文章摘录数据，然后被传递到同位素过滤code。我不知道要做到这一点的最好办法，但我目前通过每个页面（博客文章摘录）与一个Ajax请求试图循环，然后访问数据为一个整体。
This question primarily deals with getting the blog post excerpt data via Ajax, to then be passed into Isotope filtering code. I'm not sure of the best way to do this, but am currently trying to loop through each page (of blog posts excerpts) with an ajax request and then access the data as one whole.
我遇到两种不同的方法来遍历Ajax请求，每次使用然后在 jQuery的语句。 这太回答，另一种是干脆把整个然后当语句 $。每个语句内。
I've come across two different methods to loop through the ajax requests, each using then when jquery statements. The first is using the method give in this SO answer, the other is simply putting the entire then when statement inside of an $.each statement.
方法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
});
});
轻微旁白：？任何想法，为什么这是输出一串，然后对象的
方法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
})
});
我还没有想出如何把Ajaxed数据到我的同位素过滤功能，但我想我会需要解析成HTML这个第一。不过让我的地位与JavaScript ...在这种情况下，这些数据类型（对象VS字符串）的一个容易解析成HTML？我想这是关键，以我的答案？
I haven't yet figured out how to incorporate the Ajaxed data into my Isotope filter function, but I think I'll need to parse this into HTML first. Still getting my footing with javascript... in this case is one of these data types (objects vs strings) easier to parse into HTML? I suppose that's the key to my answer?
非常感激的见解。
PS：奖励积分的人谁可能知道一个更好的方式来在某种程度上契合到同位素/无限滚动很好（可能的方式，更意在发挥好以不同的方式实现这一目标这些插件......我已经在我的搜索失败）。
PS: Bonus points for anyone who might know of a better way to achieve this in a different way that somehow dovetails into Isotope/Infinite Scroll nicely (perhaps in a way that's more intended to play nice with these plugins... I've been unsuccessful in my searching).
PPS：第二个方法的感觉的干净多了......任何人都知道的原因，这不是一个好方法（使用时，那么的。每次循环里面的）？
PPS: The second method feels much cleaner... anyone know of a reason that it's not a good approach (using when then inside of an .each loop)?
推荐答案
哇，这是一个主要范围的问题，难怪没有任何反应。这是一个巨大的问题，所以我会尽我所能来帮助。我已经创造了许多网站同时使用AJAX preLOAD的与无限滚动，包括同位素的排序/过滤所以这里是我已经写了最简单的例子之一...
Wow, this is a largely scoped question no wonder there aren't any responses. This is a massive question so I will do my very best to help. I have created many sites that include the sort/filtering of Isotope while using AJAX preload's with infinite scrolling so here is one of the simplest examples I have already written out...
首先不得不提的是这整个事情的作品与大卫DeSandro的要好得多 ImagesLoaded 插件。这主要是因为它可以让你（一旦事件发生时要执行的功能）将一个回调函数连接到最终图像在一个给定的容器装载事件。哇，这是罗嗦。如何把更好......基本上，它要求的容器，你加载完成了吗？没有？现在如何？你装的？好吧，请做这个功能现在然后...
First I must mention that this whole thing works much better with David DeSandro's ImagesLoaded plugin. This is mostly because it allows you to place a callback function (function to be executed once an event occurs) attached to the loading event of the final image in a given container. Wow that was wordy. How to put that better... It basically asks the container, are you done loading yet? No? How about now? You're loaded? Ok please do this function now then...
随着中正在执行我将与此code开始像这样我的onLoad事件......
With that being implemented I would start with this code in my onLoad event like so...
$(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
});
});
好了，所以让我们打破这种下降。该ImagesLoaded插件停止同位素插件实例发生前有图像present排序/过滤/负载和/或处理。这是第1步第2步是将随后开始寻找实际的同位素插件实例。我告诉它使用砌体插件作为其布局风格，那么我传递的对象常量数组键砖石下的选项。这里的数组的键名为砌筑是一样的，你将过去与独立砌体插件（非同位素或同位素2）已经正常完成任何实例。
Ok so let's break this down. The ImagesLoaded plugin stops the Isotope plugin instantiation from happening before there are images present to sort/filter/load and/or handle. This is step 1. Step 2 would be to then start looking at the actual isotope plugin instantiation. I am telling it to use Masonry plugin as its layout style and then I am passing in an object literal with options under the array key 'masonry'. The array key here that is named masonry is the same as any instantiation you would have normally done in the past with the stand alone Masonry plugin (non-isotope or isotope-2).
第三步看这里将是我开始调用 extendJQ_ preLOAD（）; 。这个功能是我写的，让JQuery的知道，我需要扩展它的功能是为了与能力preloading我给它的任何图像，作为数组的核心功能。像这样...
Step 3 to look at here would be my beginning call to extendJQ_PreLoad();. This function is the function I wrote to let JQuery know that I need to extend it's core functionality in order to capacitate preloading any images I give it, as an array. Like so...
function extendJQ_PreLoad() {
$.preloadImages = function(args) {
for (var i = 0; i < args.length; i++) {
$("<img />").attr("src", args[i]);
}
}
} //end function
这仅仅是一个简单的迭代器并没有什么花哨的，它可以让图像是通过一个巧妙的与DOM相关ploaded $ P $。如果以这种方式加载图像加载，然后到内存，但不进DOM这意味着它加载和隐藏。一旦你再插入该图像的任何地方，它将插入速度非常快，因为它是在缓存中，等待安置，现在装。您可以查看更多关于这个 rel="nofollow">。
This is just a simple iterator and nothing fancy, it allows the images to be preloaded by using a neat trick associated with the DOM. If you load images in this way it loads then into memory but not into the DOM meaning it is loaded and hidden. Once you then insert this image anywhere it will insert very quickly as it is now loaded in cache and awaiting placement. You can view more about this here.
最后，最后看是我的电话给我的preLOAD功能。这是简单地去并寻找下一组图像，从而，如果有任何找到一个PHP文件非常简单的调用。如果它获得某些图像然后它开始将它添加到一个临时的div在存储器（未再次对DOM来中看到），现在设置为简单DOM遍历。让我们看函数来剖析它的功能...
Finally the last to look at is my call to my preload function. This is a very simple call to a php file that simply goes and looks for the next set of images in order, if there is any to find. If it gets some images then it begins adding it to a temporary div in memory (again not on the DOM to be seen) and is now setup for simple DOM traversal. Let's view the function to dissect 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
在这个例子中我已经住在离我的JavaScript的浏览器窗口，我会宣布两个全局变量。 A 启动和 loadSize 变量。该启动变量重新presents在我们的形象，我们目前正处于与 loadSize 的列表中的当前位置变量每次设置多少图像的限制preLOAD。
In this example I have two global variables living in my browser window from JavaScript that I would have declared. A start and a loadSize variable. The start variable represents the current place in our list of images that we currently are at and the loadSize variable sets a limit on how many images to preload each time.
现在这两个变量被设置在送往通过 $。交函数的PHP文件，我们可以使用PHP文件，找到相应的图片，以便与让他们加载到内存中，等待使用。无论这里返回到是变量被由每个函数，然后preloaded迭代。一旦这个功能范围退出虚格将被删除，发送垃圾，因为它不使用简单的迭代。
Now that the variables are set and sent in to the PHP file via the $.post function, we can use the PHP file to find the appropriate images in order and have them loaded into memory awaiting usage. Whatever is returned here to the y variable gets iterated over by the each function and then preloaded. Once this functions scope is exited the imaginary div will be deleted and sent to garbage as it is not used simple iterated over.
好了，现在。它是一个旅程，但我们几乎可以在这里开始的最终方法。让我们先回过头来看看第一个 imagesLoaded 呼叫正在做的事情，我们知道在这些功能添加的新功能。在DOM-ready事件 imagesLoaded 呼叫在其最底部一块调用preloads图像....为什么？这是因为一旦在页面加载和初始图像被装入同位素容器，我们所需要的页来现在使用这个空闲时间开始已经加载下一组。因此，换句话说，一旦图像被放置和分类，并高兴地只是坐在那里，接下来的 loadSize 量的图像将被加载并等待着你去把他们。
Ok, now. Its been a journey but we are almost ready to begin the final method here. Let's first go back and look at what the first imagesLoaded call was doing now that we know the new functionality added in these functions. The imagesLoaded call in the DOM-Ready event has a call in its very bottom piece that preloads the images.... why? This is because once the page loads and the initial images are loaded into the isotope container, we need the page to now use this idle time to begin already loading the next set. So in other words once the images are placed and sorted and happy to just sit there, the next loadSize amount of images will be loaded and waiting for you to place them.
现在进行最后的功能。此函数是一个通用的函数那唯一目的是在当前preloaded图像加载到DOM正式然后，要求要加载的下一组。然而地球上什么是调用这个函数？这就是lazyloading或infinitescroll变得对我们有用的。放在你的网页，你需要在添加此功能...
Now for the final function. This function is a generic function thats sole purpose is to load in the current preloaded images into the DOM officially and then to ask for the next set to be loaded. However what on earth would be calling this function? This is where the lazyloading or infinitescroll becomes useful to us. Somewhere in your page you need to add this function in...
$(window).scroll(function(){
scrollTop = $(window).scrollTop(),
windowHeight = $(window).height(),
docuHeight = $(document).height();
//AJAX Data Pull
if(((scrollTop + windowHeight)+35) >= docuHeight){
getNextImages();
}
});
这功能是神奇的功能，允许发生infinitescroll效果。我已经添加了35个像素左右的填充，因为有时候你希望它加载接近页面的末尾而不是页面的相当实际的结束（在我的code中的随机+35）。
This function is the magic function that allows the infinitescroll effect to occur. I have added 35 pixels or so of padding (the +35 randomly in my code) because sometimes you want it to load close to the end of the page but not quite the actual end of the page.
确定，所以现在，这是建立在我们到达的页面此功能会希望得到所有一般像我们所提到的下一个图像的结束。我的功能看起来像这样...
Ok so now that this is setup when we reach the end of the page this function will want to get all of the next images generically like we had mentioned. The function of mine 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 have included the unFilled variable simply so that there is a flag that can be set when you have reached the end of the images. You don't want it to keep trying to load forever if there are no images left to show.
好了，。这是大量的信息，所以我会尽量保持回答尽可能多的。
Ok, so. This is a lot of information so I will try to keep answering as much as possible.
这篇关于它使用 - 通过Ajax请求循环的jQuery那么当两种方法？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！