Ich habe ein täuschend einfaches Blog-Projekt in Arbeit, bei dem ich versuche, Isotope Jquery (für das Layout) zusammenzubringen / Filtern / Sortieren), Unendlich Scroll und dynamisches Laden aller Blog-Auszüge über Ajax (so wird das Filtern und Sortieren angewendet) alle Auszüge, bevor der Benutzer die Seite herunterscrollt (nach welcher Zeit werden sie in das Dom geladen und dann zugänglich)).
Bei dieser Frage geht es in erster Linie darum, die Blog-Post-Extraktdaten über Ajax zu erhalten, um sie dann in den Isotope-Filtercode zu übertragen. Ich bin mir nicht sicher, wie das am besten funktioniert, aber ich versuche derzeit, jede Seite (von Blog-Post-Auszügen) mit einer Ajax-Anfrage zu durchlaufen und dann auf die Daten als Ganzes zuzugreifen.
Ich habe zwei verschiedene Methoden kennengelernt, um die Ajax-Anfragen zu durchlaufen, die jeweils then when jquery-Anweisungen verwenden. Die erste Methode verwendet die Methode diese SO-Antwort , die andere setzt einfach die gesamte then when -Anweisung in ein $.each -Anweisung.
Methode 1:
%Vor%Leichte Abweichung: Irgendwelche Ideen, warum dies eine Zeichenfolge und dann Objekte ausgibt?
Methode 2:
%Vor%Ich habe noch nicht herausgefunden, wie man die Ajaxed-Daten in meine Isotope-Filterfunktion einbaut, aber ich denke, dass ich das zuerst in HTML analysieren muss. Immer noch meinen Fuß mit Javascript ... in diesem Fall ist einer dieser Datentypen (Objekte vs Strings) einfacher in HTML zu analysieren? Ich nehme an, das ist der Schlüssel zu meiner Antwort?
Viel zu Einsichten verpflichtet.
PS: Bonuspunkte für alle, die einen besseren Weg kennen, dies auf eine andere Art und Weise zu erreichen, die sich irgendwie in Isotope / Infinite Scroll einfügt (vielleicht in einer Art, die eher dazu dient, nett zu spielen) mit diesen Plugins ... Ich war bei meiner Suche nicht erfolgreich).
PPS: Die zweite Methode fühlt sich viel sauberer an ... jeder kennt einen Grund dafür, dass es kein guter Ansatz ist (mit when then innerhalb eines .each Schleife)?
Wow, das ist eine weitgehend begrenzte Frage, kein Wunder, dass es keine Antworten gibt. Das ist eine große Frage, also werde ich mein Bestes geben, um zu helfen. Ich habe viele Seiten erstellt, die die Sortierung / Filterung von Isotopen beinhalten, während ich AJAX Preloads mit unendlichem Scrolling nutze, also ist hier eines der einfachsten Beispiele, die ich bereits geschrieben habe ...
Zuerst muss ich erwähnen, dass diese ganze Sache viel besser mit David DeSandros ImagesLoaded Plugin funktioniert. Dies liegt hauptsächlich daran, dass Sie eine Callback-Funktion (Funktion, die ausgeführt wird, sobald ein Ereignis eintritt) platzieren, die an das Ladeereignis des endgültigen Bildes in einem gegebenen Container angehängt ist. Wow, das war wortwörtlich. Wie geht das besser ... Es fragt im Grunde den Container, sind Sie fertig Laden noch? Nein? Wie wäre es jetzt? Du bist geladen? Ok bitte tu diese Funktion jetzt dann ...
Wenn das implementiert wird, würde ich mit diesem Code in meinem onLoad-Ereignis wie folgt beginnen ...
%Vor%Ok, lasst uns das kaputt machen. Das ImagesLoaded-Plugin stoppt die Instanziierung des Isotopen-Plugins, bevor Bilder zum Sortieren / Filtern / Laden und / oder Behandeln vorhanden sind. Dies ist Schritt 1. Schritt 2 wäre, dann zu beginnen, die tatsächliche Isotop-Plugin-Instanziierung zu betrachten. Ich sage ihm, das Maurer-Plugin als Layout-Stil zu verwenden, und dann gebe ich ein Objekt-Literal mit Optionen unter dem Array-Schlüssel 'Maurerarbeit' ein. Der Array-Schlüssel, der hier als "Mauerwerk" bezeichnet wird, ist derselbe wie jede Instanziierung, die Sie normalerweise mit dem eigenständigen Mauerwerk-Plugin (Nicht-Isotop oder Isotop-2) durchgeführt hätten.
Schritt 3, um hier zu sehen, wäre mein erster Aufruf an extendJQ_PreLoad(); . Diese Funktion ist die Funktion, die ich geschrieben habe, um JQuery wissen zu lassen, dass ich seine Kernfunktionalität erweitern muss, um Bilder, die ich ihm gebe, als Array vorladen zu können. Wie so ...
Dies ist nur ein einfacher Iterator und nichts Besonderes, es erlaubt die Bilder vorgeladen werden, indem Sie einen schönen Trick mit dem DOM verbunden. Wenn Sie Bilder auf diese Weise laden, lädt es dann in den Speicher, aber nicht in das DOM, was bedeutet, dass es geladen und versteckt wird. Sobald Sie dieses Bild an einer beliebigen Stelle einfügen, wird es sehr schnell eingefügt, da es jetzt im Cache geladen ist und auf die Platzierung wartet. Sie können mehr hier sehen.
Schließlich ist der letzte Aufruf mein Aufruf meiner Preload-Funktion. Dies ist ein sehr einfacher Aufruf an eine PHP-Datei, die einfach geht und nach der nächsten Menge von Bildern in der Reihenfolge sucht, falls es welche zu finden gibt. Wenn es einige Bilder erhält, beginnt es mit dem Hinzufügen zu einem temporären div im Speicher (wiederum nicht im DOM, das zu sehen ist) und ist jetzt für einfaches DOM-Traversal eingerichtet. Lassen Sie uns die Funktion betrachten, um ihre Funktionalität zu analysieren ...
%Vor% In diesem Beispiel habe ich zwei globale Variablen in meinem Browser-Fenster von JavaScript, die ich deklariert hätte. Eine start und eine loadSize Variable. Die Variable start repräsentiert den aktuellen Platz in unserer Liste von Bildern, in denen wir uns gerade befinden, und die Variable loadSize legt eine Grenze für die Anzahl der Bilder fest, die jedesmal geladen werden soll.
Nun, da die Variablen über die Funktion $.post gesetzt und an die PHP-Datei gesendet werden, können wir die PHP-Datei verwenden, um die passenden Bilder der Reihe nach zu finden und sie in den Speicher zu laden, wo sie verwendet werden. Was hier an die Variable y zurückgegeben wird, wird von der Funktion each iteriert und dann vorgeladen. Sobald dieser Funktionsbereich verlassen wird, wird das imaginäre Div gelöscht und in den Müll geschickt, da es nicht einfach iteriert wird.
Ok, jetzt. Es war eine Reise, aber wir sind fast bereit, die letzte Methode hier zu beginnen. Gehen wir zuerst zurück und schauen uns an, was der erste imagesLoaded -Aufruf gerade gemacht hat, da wir die neue Funktionalität kennen, die in diesen Funktionen hinzugefügt wurde. Der Aufruf imagesLoaded im DOM-Ready-Ereignis hat einen Aufruf in seinem unteren Teil, der die Bilder vorlädt .... warum? Dies liegt daran, dass sobald die Seite geladen ist und die anfänglichen Bilder in den Isotopencontainer geladen sind, die Seite, die nun diese Leerlaufzeit verwendet, beginnt, bereits mit dem Laden des nächsten Satzes zu beginnen. Das heißt, wenn die Bilder erst einmal platziert und sortiert sind und Sie einfach nur dort sitzen, wird die nächste loadSize Menge an Bildern geladen und wartet darauf, dass Sie sie platzieren.
Jetzt für die letzte Funktion. Diese Funktion ist eine allgemeine Funktion, deren einziger Zweck es ist, die aktuell geladenen Bilder offiziell in das DOM zu laden und danach zu fragen, ob der nächste Satz geladen werden soll. Aber was in aller Welt würde diese Funktion nennen? Hier wird das Lazyloading oder Infinitescroll für uns nützlich. Irgendwo auf Ihrer Seite müssen Sie diese Funktion hinzufügen in ...
%Vor%Diese Funktion ist die magische Funktion, die den Infinitescroll-Effekt ermöglicht. Ich habe etwa 35 Pixel Padding hinzugefügt (die +35 zufällig in meinem Code), weil manchmal gewünscht wird, dass sie nahe am Ende der Seite geladen wird, aber nicht ganz am tatsächlichen Ende der Seite.
Ok, jetzt, wo dies eingerichtet ist, wenn wir das Ende der Seite erreichen, wird diese Funktion alle folgenden Bilder generisch bekommen wollen, wie wir es erwähnt haben. Die Funktion von mir sieht so aus ...
%Vor% Ich habe die Variable unFilled einfach eingefügt, so dass es ein Flag gibt, das gesetzt werden kann, wenn Sie das Ende der Bilder erreicht haben. Du willst nicht, dass es weiterhin versucht, für immer zu laden, wenn keine Bilder mehr zu sehen sind.
Ok, also. Dies ist eine Menge an Informationen, so werde ich versuchen, so viel wie möglich zu beantworten.
Tags und Links javascript jquery ajax jquery-isotope infinite-scroll