Verzögern des Ladens von Bildern und JavaScript in SharePoint Online

In diesem Artikel wird beschrieben, wie die Ladezeiten für SharePoint Online-Seiten mithilfe von JavaScript verringert werden können, um das Laden von Bildern zu verzögern, sowie durch Warten auf das Laden von nicht unbedingt erforderlichem JavaScript, nachdem die Seite geladen wurde.

Bilder können das Laden von Seiten in SharePoint Online verlangsamen. Standardmäßig rufen die meisten modernen Internetbrowser Bilder beim Laden einer HTML-Seite vorab ab. Dies kann das Laden der Seite unnötig verlangsamen, wenn die Bilder nicht auf dem Bildschirm sichtbar sind, bis der Benutzer nach unten scrollt. Die Bilder können den Browser daran hindern, den sichtbaren Teil der Seite zu laden. Zur Umgehung dieses Problems können Sie JavaScript verwenden, um den Vorgang zu überspringen, bei dem die Bilder zuerst geladen werden. Auch das Laden von nicht unbedingt erforderlichem JavaScript kann die Ladezeiten Ihrer SharePoint-Seiten erhöhen. In diesem Thema werden einige Methoden beschrieben, mit deren Hilfe Sie die Seitenladezeiten mit JavaScript in SharePoint Online verbessern können.

Verbessern der Seitenladezeiten durch verzögertes Laden von Bildern auf SharePoint Online-Seiten mithilfe von JavaScript

Mithilfe von JavaScript können Sie verhindern, dass ein Webbrowser Bilder vorab abruft. Dies beschleunigt das Rendern des Dokuments insgesamt. Zu diesem Zweck entfernen Sie den Wert des Attributs "src" aus dem <img>-Tag und ersetzen ihn durch den Pfad zu einer Datei in einem Datenattribut wie z. B. "data-src". Beispiel:

<img src=”” data-src=”/sites/NavigationBySearch/_catalogs/masterpage/Images/microsoft-white-8.jpg” />

Wenn Sie diese Methode anwenden, lädt der Browser die Bilder nicht sofort herunter. Wenn sich das Bild bereits im Anzeigebereich befindet, weist JavaScript den Browser an, die URL aus dem Datenattribut abzurufen und sie als Wert für das "src"-Attribut einzufügen. Das Bild wird nur dann geladen, wenn der Benutzer scrollt und es sichtbar wird.

Dafür brauchen Sie JavaScript.

Definieren Sie in einer Textdatei die Funktion isElementInViewport()   , um zu überprüfen, ob sich ein Element in dem Teil des Browsers befindet, der für den Benutzer sichtbar ist.

function isElementInViewport(el) {
  if (!el)
    return false;
  var rect = el.getBoundingClientRect();
  return (
    rect.top >= 0 &&
    rect.left >= 0 &&
    rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) &&
    rect.right <= (window.innerWidth || document.documentElement.clientWidth) 
  );
}

Verwenden Sie anschließend isElementInViewport()    in der Funktion loadItemsInView()   . Die Funktion loadItemsInView()    lädt alle Bilder, die einen Wert für das Attribut "data-scr" haben, wenn sie sich in dem Teil des Browsers befinden, der für den Benutzer sichtbar ist. Fügen Sie die folgende Funktion zur Textdatei hinzu:

function loadItemsInView() {
  //Select elements by the row id.
  $("#row [data-src]").each(function () {
      var isVisible = isElementInViewport(this);
      if (isVisible) {
          if ($(this).attr("src") == undefined) {
              $(this).attr("src", $(this).data("src"));
          }
      }
  });
}

Rufen Sie abschließend loadItemsInView()    innerhalb von window.onscroll()    auf, wie im folgenden Beispiel gezeigt. Dadurch wird sichergestellt, dass alle Bilder, die sich im Anzeigebereich befinden, geladen werden, wenn der Benutzer sie benötigt, aber nicht davor. Fügen Sie Folgendes in der Textdatei hinzu:

//Example of calling loadItemsInView() from within window.onscroll()
$(window).on("scroll", function () {
    loadItemsInView();
});

Bei SharePoint Online müssen Sie die folgende Funktion an das Scrollereignis im <Div>-Tag "#s4-workspace" anfügen. Dies ist deshalb erforderlich, weil die Fensterereignisse überschrieben werden, um sicherzustellen, dass das Menüband oben auf der Seite angefügt bleibt.

//Keep the ribbon at the top of the page
$('#s4-workspace').on("scroll", function () {
    loadItemsInView();
});

Speichern Sie die Textdatei als JavaScript-Datei mit der Erweiterung ".js", z. B. "delayLoadImages.js".

Nachdem Sie "delayLoadImages.js" fertig geschrieben haben, können Sie den Inhalt der Datei einer Gestaltungsvorlage in SharePoint Online hinzufügen. Zu diesem Zweck fügen Sie der Kopfzeile in der Gestaltungsvorlage einen Skriptlink hinzu. Sobald sich das JavaScript in einer Gestaltungsvorlage befindet, wird es auf alle Seiten der SharePoint Online-Website angewendet, die dieses Gestaltungsvorlagenlayout verwenden. Wenn Sie dies nur auf einer Seite Ihrer Website anwenden möchten, verwenden Sie das Skripteditor-Webpart, um das JavaScript in die Seite einzubetten. Weitere Informationen finden Sie in den folgenden Themen:

Beispiel: Verweisen auf die JavaScript-Datei "delayLoadImages.js" von einer Gestaltungsvorlage in SharePoint Online   

Damit dies funktioniert, müssen Sie auch auf die jQuery in der Gestaltungsvorlage verweisen. Im folgenden Beispiel sehen Sie beim ersten Laden der Seite, dass nur ein Bild geladen wird, es auf der Seite aber mehrere Bilder gibt.

Screenshot mit einem geladenen Bild auf der Seite

Der folgende Screenshot zeigt die restlichen Bilder, die heruntergeladen werden, nachdem sie durch Scrollen sichtbar werden.

Screenshot mit mehreren geladenen Bildern auf der Seite

Das Verzögern des Ladens von Bildern mithilfe von JavaScript kann sehr effektiv sein, um die Leistung zu erhöhen. Wenn diese Methode jedoch auf eine öffentliche Website angewendet wird, sind die Suchmaschinen nicht in der Lage, die Bilder genauso zu durchforsten wie ein regulär formatiertes Bild. Dies kann sich auf die Priorisierung in den Suchmaschinen auswirken, da die Metadaten für das Bild selbst erst dann wirklich vorhanden sind, wenn die Seite geladen wird. Suchmaschinen-Crawler lesen nur den HTML-Code und erfassen daher die Bilder nicht als Inhalt auf der Seite. Bilder gehören zu den Faktoren, anhand derer Seiten in den Suchergebnissen in einer bestimmten Rangfolge angeordnet werden. Eine Möglichkeit, dieses Problem zu umgehen, besteht darin, Einführungstext für die Bilder zu verwenden.

GitHub-Codebeispiel: Einfügen von JavaScript zur Verbesserung der Leistung

Sehen Sie sich unbedingt den Artikel und das Codebeispiel für JavaScript-Einfügung auf GitHub an.

Siehe auch

Unterstützte Browser in Office 2013 und Office 365 ProPlus

Vorgehensweise: Anwenden einer Gestaltungsvorlage auf eine Website in SharePoint 2013

Vorgehensweise: Erstellen eines Seitenlayouts in SharePoint 2013

Ihre Fähigkeiten erweitern
Schulung erkunden
Neue Funktionen als Erster erhalten
An Office Insider teilnehmen

War diese Information hilfreich?

Vielen Dank für Ihr Feedback!

Vielen Dank für Ihr Feedback. Es klingt, als ob es hilfreich sein könnte, Sie mit einem unserer Office-Supportmitarbeiter zu verbinden.

×