"Lazyloading" von Informationen aus einer Datenbank auf einer PHP-Seite in prozedural

Question

Ich weiß, dass für das richtige verzögerte Laden normalerweise Objekte und ein Proxy-Muster verwendet werden müssen.Ich bin noch nicht da, da eine Website neu gestaltet werden muss.Gibt es jedoch eine Möglichkeit, DB-Daten trotzdem auf eine Seite zu spulen und die Ladezeit etwas zu beschleunigen?

Answer 1

Dies kann mit AJAX erreicht werden.

Wenn Sie eine Seite zum ersten Mal laden, platzieren Sie Platzhalter dort, wo der schwere Inhalt abgelegt werden soll.Verwenden Sie zum Beispiel ein div mit einem unverwechselbaren Stil und einem animierten Ladebild im Inneren, damit die Besucher deutlich erkennen können, dass noch mehr geladen wird.Sie können vertraut aussehende AJAX-Ladebilder unter generieren ajaxload.info.

Haben Sie unten auf Ihrer Seite ein Skript, das die erforderlichen Funktionen aufruft oder bindet, um den zusätzlichen Inhalt mit AJAX zu laden.Sie könnten den AJAX-Aufruf an jQuery binden .ready() zum Beispiel, um das Laden zu starten, sobald der Rest des Dokuments fertig ist oder .scroll() um zu starten, wenn der Benutzer über ein bestimmtes Element scrollt (z.vorbei an bestimmten 'Orientierungspunkten' auf Ihrer Seite, die Inhaltsblöcke trennen).

Wenn Sie die AJAX-Antwort erhalten, die den zusätzlichen Inhalt enthält (vorzugsweise als HTML in Zeichenfolgenform vorformatiert), ersetzen Sie den Inhalt des Platzhalters div mit der AJAX-Antwort mit .innerHTML = oder jQuery's .html().Ändern Sie den Stil des div bei Bedarf mit setAttribute("class","newClass") oder jQuery's .attr("class","value") um die CSS-Klasse zu ersetzen.

Der Besucher kann Ihre gesamte Seite sehen und durch sie scrollen, während das Laden stattfindet.Der zusätzliche Inhalt wird angezeigt, wenn er fertig ist, ohne das Surferlebnis des Besuchers zu unterbrechen.Sie können dies für das Auge etwas schöner gestalten, indem Sie die Übergänge nach der Inhaltsinjektion animieren.

Wenn Sie einige zusätzliche Beispiele für die Verwendung von AJAX zum asynchronen Abrufen von Inhalten benötigen, schauen Sie sich Folgendes an diese für den klassischen JavaScript-Ansatz oder jQuery .ajax () -Dokumente.

Answer 2

Sie können JavaScript verwenden, um das Laden zusätzlicher Daten zu starten, sobald die Hauptseite der Hauptseite geladen wird.Auf diese Weise kann Ihre Hauptseite einfach die Komponenten auf der Seite beschrieben, die "Spinners" angeben, um anzuzeigen, dass mehr Daten geladen werden, und dann auf JavaScript deaktivieren, um mehr Daten zu erhalten.