Lazy Load - refresh / aktualisieren, wenn Sie in Kombination mit javascript-Filterung

Ich versuche jetzt zu implementieren lazyload auf meiner website.
Ich habe erfolgreich bekam lazy load funktioniert auf Seiten, die eine statische Galerie.

Den Haupt-portfolio der website hat eine große Liste von Bildern, die gefiltert werden können, die über die javascript-Bibliothek-Isotop.

Dem lazy load funktioniert, wenn die Filterung nicht verwendet, jedoch, wenn die Seite geladen wird und ich nicht scrollen, aber die Filterung verwendet wird, die Gegenstände, die gebracht werden, in der Ansicht nicht beheben. Ich fand, dass gelegentlich Bilder bearbeitet, aber die meisten nicht.
Irgendwelche Vorschläge, wie man dieses Problem beheben?

Vermutlich muss ich in der Lage sein, etwas zu tun, wird re-trigger lazy load zum aktualisieren oder überprüfen Sie selbst?

Hier ist die Galerie, die ich versuche, zu arbeiten, wo sehen Sie die Probleme, die ich habe: http://www.imageworkshop.com/lazyload-portfolio/

Jemand in der Lage zu helfen?

  • Können Sie replizieren Ihre Ausgabe auf einer Seite, und verbinden Sie es? Und von dem, was ich zu mir nehme, ist, dass Sie bei der Filterung, lazy loading funktioniert, wenn Sie es auslösen durch scrollen der Seite. Aber die ersten Bilder, die angezeigt werden oben auf der Seite nicht laden. Bin ich richtig?
  • Hi Zack - der link ist oben: imageworkshop.com/lazyload-portfolio. lazy loading funktioniert gut, wenn die Seite das erste mal lädt, aber wenn Sie klicken, um auf die filter-Optionen anzeigen 'eingeschränkt' - Liste, einige der Bilder nicht beheben
InformationsquelleAutor Gearu | 2012-11-08
  1. 2

    nennen Sie diesen code auf gefilterten Objekt geklickt wird: $(window).trigger('scroll');

    • können Sie das klären, wo in meinem code, ich sollte diese Aussage?
    • Ich denke, dass dieser post hat einige gute Antworten, aber immer noch versuchen, herauszufinden, wie man es Arbeit für mich. link
    • Auf meinem Projekt einige Bilder von "hidden-div" ist nicht geladen, wenn ich zeige, dass div. Denn lazy load nicht nennen. Standardmäßig lazy load angeschlossen ist auf Seite scrooling. So, ich habe diesen code nach dieser Zeile: $('#MyHiddenDiv').show();
    • Übrigens, sehe ich kein problem auf Ihrer Website.
    • Ich habe die Lösung unten zu bekommen, dies geht. einzige Frage, die ich noch habe, ist, dass nach der Filterung werden die Bilder jetzt nicht laden, bis ich scrollen. Brauchen, um zu versuchen, um die trigger der ersten Aktualisierung ausgeführt werden, nach dem filtern.
    InformationsquelleAutor Nuri Akman
  2. 0

    Fand ich diese Antwort von acarabott - https://stackoverflow.com/a/13919010/735369
    Habe ich umgesetzt und das hat geklappt.
    Das einzige Problem ist, dass der refresh nicht der Fall, bis eine scroll-Aktion stattfindet.

    Wenn Sie verwenden möchten Isotop die Sortier - /Filter-Funktionen, die Sie benötigen, um die failure_limit von lazyload und das Ereignis ausgelöst, die mit Isotop ist onLayout Rückruf.

    jQuery(document).ready(function($) {
var $win = $(window),
    $con = $('#container'),
    $imgs = $("img.lazy");

  $con.isotope({
     onLayout: function() {
        $win.trigger("scroll");
     }
});

$imgs.lazyload({
    failure_limit: Math.max($imgs.length - 1, 0)
 });

    Erklärung

    Laut der docs ( http://www.appelsiini.net/projects/lazyload )

    After scrolling page Lazy Load loops though unloaded images. In loop it checks if image has become visible. By default loop is stopped when first image below the fold (not visible) is found. This is based on following assumption. Order of images on page is same as order of images in HTML code. With some layouts assumption this might be wrong.

    Mit einem Isotop sortiert/gefiltert Liste, die Reihenfolge der Seiten ist sicherlich anders als die von HTML, so dass wir brauchen, um uns failure_limit.

    Wie Sie sehen können, speichern wir das jQuery-Objekt, so dass wir verwenden können, seine Länge-1, da unsere failure_limit. Wenn du neugierig bist, warum es ist, in der Länge 1, es ist aufgrund der folgenden check-in lazyload-update-Methode.

     if (++counter > settings.failure_limit) {
    return false;
 }

    Lazy load auf anderen Veranstaltungen

    Wenn Sie nicht ausgelöst Ihre lazyloads auf Blättern, die Sie benötigen, tauschen Sie die "scroll" - trigger für welche Veranstaltung Sie verwenden.
    Demo

    http://jsfiddle.net/arthurc/ZnEhn/

    InformationsquelleAutor Gearu
Schreibe einen Kommentar