Het laden van afbeeldingen en JavaScript in SharePoint vertragen

In het artikel wordt beschreven hoe u de laadtijd voor SharePoint-pagina's kunt verkorten door JavaScript te gebruiken om het laden van afbeeldingen te vertragen en ook door te wachten met het laden van niet-essentiële JavaScript totdat de pagina is geladen.

Afbeeldingen kunnen de laadsnelheden van pagina's in SharePoint negatief beïnvloeden. De meeste moderne internetbrowsers prefetch afbeeldingen standaard bij het laden van een HTML-pagina. Dit proces kan ertoe leiden dat de pagina traag wordt geladen als de afbeeldingen niet zichtbaar zijn op het scherm totdat de gebruiker omlaag schuift. De afbeeldingen kunnen het laden van het zichtbare deel van de pagina blokkeren in de browser. Als u dit probleem wilt omzeilen, kunt u JavaScript gebruiken om eerst het laden van de afbeeldingen over te slaan. Bovendien kan het laden van niet-essentiële JavaScript de downloadtijden op uw SharePoint-pagina's vertragen. In dit artikel worden enkele methoden beschreven die u kunt gebruiken om de laadtijden van pagina's te verbeteren met JavaScript in SharePoint.

Laadtijden van pagina's verbeteren door het laden van afbeeldingen in SharePoint-pagina's te vertragen met behulp van JavaScript

U kunt JavaScript gebruiken om te voorkomen dat een webbrowser afbeeldingen prefetching. Met deze techniek wordt de algehele documentweergave versneld. Hiervoor verwijdert u de waarde van het kenmerk src uit de <tag img> en vervangt u deze door het pad naar een bestand in een gegevenskenmerk, zoals: data-src. Bijvoorbeeld:

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

Bij deze methode downloadt de browser de afbeeldingen niet onmiddellijk. Als de afbeelding zich al in de viewport bevindt, vertelt JavaScript de browser om de URL op te halen uit het gegevenskenmerk en deze in te voegen als de waarde voor het kenmerk src. De afbeelding wordt alleen geladen terwijl de gebruiker schuift en deze in beeld komt.

Als u deze functie wilt uitvoeren, moet u JavaScript gebruiken.

Definieer in een tekstbestand de functie isElementInViewport() om te controleren of een element zich in het gedeelte van de browser bevindt dat zichtbaar is voor de gebruiker.

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) &amp;&amp;
    rect.right <= (window.innerWidth || document.documentElement.clientWidth)
  );
}

Gebruik vervolgens isElementInViewport() in de functie loadItemsInView(). Met de functie loadItemsInView() worden alle afbeeldingen met een waarde voor het kenmerk data-src geladen als ze zich in het gedeelte van de browser bevinden dat zichtbaar is voor de gebruiker. Voeg de volgende functie toe aan het tekstbestand:

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"));
          }
      }
  });
}

Roep ten slotte loadItemsInView() aan vanuit window.onscroll() zoals wordt weergegeven in het volgende voorbeeld. Deze functie zorgt ervoor dat alle afbeeldingen die zich in de viewport bevinden, worden geladen als de gebruiker ze nodig heeft, maar niet eerder. Voeg het volgende toe aan het tekstbestand:

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

Voor SharePoint moet u de volgende functie koppelen aan de schuifgebeurtenis op de div-tag> #s4-workspace<, omdat de venstergebeurtenissen worden overschreven om ervoor te zorgen dat het lint aan de bovenkant van de pagina blijft bevestigd.

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

Sla het tekstbestand op als een JavaScript-bestand met de extensie .js, bijvoorbeeld delayLoadImages.js.

Zodra u klaar bent met het schrijven van delayLoadImages.js, kunt u de inhoud van het bestand toevoegen aan een basispagina in SharePoint door een scriptkoppeling toe te voegen aan de koptekst op de basispagina. Zodra deze zich op een basispagina bevindt, wordt JavaScript toegepast op alle pagina's in uw SharePoint-site die gebruikmaken van die basispagina-indeling. Als u van plan bent om alleen de functionaliteit op één pagina van uw site te gebruiken, gebruikt u het webonderdeel scripteditor om het JavaScript in de pagina in te sluiten. Zie voor meer informatie:

• Procedure: Een basispagina toepassen op een site in SharePoint 2013

• Procedure: een pagina-indeling Creatie in SharePoint 2013

Voorbeeld: naar het JavaScript-delayLoadImages.js-bestand verwijzen vanuit een basispagina in SharePoint

Dit voorbeeld werkt alleen als u ook op de basispagina naar jQuery verwijst. In het volgende voorbeeld ziet u bij het laden van de eerste pagina dat er slechts één afbeelding is geladen, maar dat er nog meer op de pagina staan.

In de volgende schermopname ziet u de rest van de afbeeldingen die worden gedownload nadat ze naar de weergave zijn geschoven.

Het uitstellen van het laden van afbeeldingen met behulp van JavaScript kan een effectieve techniek zijn om de prestaties te verbeteren; Als de techniek echter wordt toegepast op een openbare website, kunnen zoekmachines de afbeeldingen niet op dezelfde manier verkennen als een regelmatig gevormde afbeelding. Deze techniek kan van invloed zijn op de rangschikking van zoekmachines, omdat metagegevens op de afbeelding zelf pas aanwezig zijn als de pagina wordt geladen. Search enginecrawlers lezen alleen de HTML en kunnen de afbeeldingen daarom niet als inhoud op de pagina zien. Afbeeldingen zijn een van de factoren die worden gebruikt om pagina's in zoekresultaten te rangschikken. Het is een goed werk om inleidende tekst te gebruiken voor uw afbeeldingen.

Voorbeeld van GitHub-code: JavaScript injecteren om de prestaties te verbeteren

Mis het artikel en het codevoorbeeld over JavaScript-injectie op GitHub niet.

Zie ook

Ondersteunde browsers in Office 2013 en Microsoft 365-apps voor ondernemingen

Procedure: Een basispagina toepassen op een site in SharePoint 2013

Procedure: een pagina-indeling Creatie in SharePoint 2013