Infinite Scroll / Lazy Loading mit NextGen Gallery

Ich arbeite an einem Projekt für einen Freund, der eine riesige Seite mit über 3.000 Fotos beinhaltet. Siehe: http://www.thepurplepixie.com/projects/purple-pixies-people-project/

Zur Zeit habe ich die Seitenzahl auf 50 Thumbnails pro Seite eingestellt, um zu versuchen, die Infinite Scroll (WordPress Plugin) ( Infinite Scroll Homepage ) zum Laufen zu bringen und um zu zeigen, wie ich die Galerien in NextGen eingerichtet habe. Zuvor hatte ich eine Seitennummerierung, also war es eine riesige Wand von Fotos, die, obwohl sie mehr oder weniger das schafften, was ich wollte, letztendlich brutal geladen wurde – sowohl hinsichtlich der Speicherkapazität als auch der Bandbreite.

Ich kann nicht scheinen, dass die Plugin-Version von Infinite Scroll funktioniert, ich schätze, weil sie für Post-Inhalte strukturierter ist als große Bilderbündel. Außerdem habe ich mehrere Instanzen des Paginierungssystems pro Seite aufgrund mehrerer Galerien pro Seite.

Hat jemand eine Idee, wie ich diese Bilder lazy laden würde?

Vielen Dank!

Solutions Collecting From Web of "Infinite Scroll / Lazy Loading mit NextGen Gallery"

Probieren Sie das Lazy-Load- Plugin aus – es wird gesagt, dass es auf WordPress.com-VIP-Sites verwendet wird, und das Plugin ist ziemlich aktuell (zuletzt am 4. Juli aktualisiert).

Vorsicht! Lazy-Laden von Bildern ist bei langsamen Verbindungen schwierig, da die Möglichkeit besteht, dass Bilder überhaupt nicht geladen werden können. Selbst ein kleiner Fehler oder eine Inkompatibilität im JavaScript-Code kann Ihre Website beschädigen.

function enqueue_lazyload() { wp_enqueue_script('jquery_lazy_load', get_stylesheet_directory_uri() . '/js/jquery.lazyload.min.js', array('jquery'), '1.9.1'); } add_action('wp_enqueue_scripts', 'enqueue_lazyload'); 

Als nächstes müssen wir ein kleines bisschen Javascript zu unserer Fußzeile hinzufügen, damit das Lazy-Load-Plugin Bilder erkennt. Sie können sehen, wie dies auf der Homepage des Plugins funktioniert, aber im Grunde müssen wir eine class angeben, auf die das Plugin zielen soll. Es wird alle Bilder mit dieser class verwenden, um ein Platzhalterbild mit dem tatsächlichen Bild auszutauschen, wenn ein Benutzer zu ihm scrollt. Wir verwenden die Aktion wp_footer, um diese automatisch an die Fußzeile jeder unserer Seiten anzuhängen.

 function footer_lazyload() { echo ''; } add_action('wp_footer', 'footer_lazyload'); 

Mit diesem Code wird das Lazy-Load-Plugin tatsächlich funktionieren. Aber unsere Bilder werden immer noch von WordPress geladen. Der Trick besteht darin, alle unsere Posts zu filtern und ein Bild mit einem Platzhalterbild auszutauschen. Dann verwenden wir gemäß den statementen des Plugins ein “Daten-Original” -Attribut auf dem img-Tag, um die tatsächliche URL des Bildes zu bezeichnen. Schließlich fügen wir jedem Bild eine “faule” class hinzu, so dass jQuery darauf achten kann. Das Lazy Load-Plugin wartet darauf, dass diese Bilder in eine Benutzeransicht gelangen, und zieht sie dann mit AJAX ein und lädt sie auf die Seite. Unser erster Schritt besteht darin, einen einfachen Filter mit preg_replace_callback hinzuzufügen, um nach img-Tags zu suchen.

 function filter_lazyload($content) { return preg_replace_callback('/(< \s*img[^>]+)(src\s*=\s*"[^"]+")([^>]+>)/i', 'preg_lazyload', $content); } add_filter('the_content', 'filter_lazyload'); 

Das jQuery Lazy Load Plugin für WordPress hat in der Vergangenheit gut funktioniert. Beachten Sie, dass der Lazy Load Autor im September 2010 folgendes geschrieben hat :

Lazy Load ist derzeit nicht nutzbar. Es funktioniert nicht mit den neuesten Browsern wie erwartet. Ich habe momentan keine Zeit den Code selbst zu aktualisieren. Patches sind immer willkommen. Wenn Sie eine Lösung finden, verzweigen Sie einfach und senden Sie eine Pull-Anfrage. Vielen Dank!