Laden van afbeeldingen en JavaScript vertragen in SharePoint Online

In dit artikel wordt beschreven hoe u de laadtijd kunt verkorten voor SharePoint Online-pagina’s door JavaScript te gebruiken om het laden van afbeeldingen uit te stellen en niet-essentieel JavaScript pas te laden als de pagina is geladen.

Afbeeldingen kunnen een negatieve invloed hebben op de laadsnelheid van pagina’s op SharePoint Online. In de meeste moderne internetbrowsers worden bij het laden van HTML-pagina’s afbeeldingen standaard als eerste geladen. Hierdoor kan de pagina onnodig langzaam worden geladen als de afbeeldingen pas zichtbaar zijn wanneer de gebruiker omlaag schuift op de pagina. De afbeeldingen kunnen verhinderen dat het zichtbare gedeelte van de pagina wordt geladen. U omzeilt dit probleem met JavaScript door te voorkomen dat de afbeeldingen eerst worden geladen. Daarnaast kan ook het laden van niet-essentieel JavaScript tot langere laadtijden op uw SharePoint-pagina's leiden. In dit onderwerp worden enkele methoden beschreven die u kunt gebruiken om de laadtijden van pagina’s met JavaScript te verbeteren in SharePoint Online.

Laadtijden van pagina’s verbeteren door het laden van afbeeldingen in SharePoint Online-pagina's uit te stellen met JavaScript

U kunt JavaScript gebruiken om te voorkomen dat afbeeldingen eerst worden opgehaald in een webbrowser. Op deze manier worden document sneller weergegeven. U doet dit door de waarde van het src-kenmerk te verwijderen uit de code <img> en te vervangen door het pad naar een bestand in een data-kenmerk, zoals data-src. Voorbeeld:

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

Als u deze methode gebruikt, worden de afbeeldingen niet direct gedownload. Als de afbeelding zich al in de viewport bevindt, wordt de browser door JavaScript geïnstrueerd om de URL van het data-kenmerk op te halen en deze in te voegen als de waarde voor het src-kenmerk . De afbeelding wordt pas geladen als de gebruiker schuift en de afbeelding in beeld komt.

Dit is alleen mogelijk als u JavaScript gebruikt.

In een tekstbestand definieert u de functie isElementInViewport()    om te controleren of een element zich in het deel 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) &&
    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 in het volgende voorbeeld wordt weergegeven. Op deze manier zorgt u ervoor dat de afbeeldingen in de viewport worden geladen als de gebruiker deze nodig heeft, niet eerder. Voeg het volgende toe aan het tekstbestand:

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

Voor SharePoint Online moet u de volgende functie aan de schuifgebeurtenis voor de code #s4-workspace <div> koppelen. Dit komt doordat de venstergebeurtenissen worden overschreven om ervoor te zorgen dat het lint aan de bovenzijde van de pagina blijft gekoppeld.

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

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

Wanneer u klaar bent met het schrijven van delayLoadImages.js, kunt u de inhoud van het bestand toevoegen aan een basispagina in SharePoint Online. U doet dit door een scriptkoppeling aan de koptekst op de basispagina toe te voegen. Vervolgens wordt het JavaScript toegepast op alle pagina’s in uw SharePoint Online-site waarvoor de indeling van de basispagina wordt gebruikt. Als u van plan bent dit slechts op één pagina van uw site te gebruiken, kunt u de scripteditor Webonderdeel gebruiken om het JavaScript in te sluiten in de pagina. Zie de volgende onderwerpen voor meer informatie:

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

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

Afbeelding van een nieuwe taak in een netwerkdiagram.

In de volgende schermafbeelding wordt de rest van de afbeeldingen weergegeven die worden gedownload wanneer ze in beeld schuiven.

Schermafbeelding van enkele afbeeldingen die op de pagina zijn geladen

Het uitgesteld laden van afbeeldingen met JavaScript kan effectief zijn om de prestaties te verbeteren, maar als de methode wordt toegepast op een openbare website, kunnen zoekprogramma's de afbeeldingen niet op dezelfde manier verkennen als normaal gevormde afbeeldingen. Dit kan invloed hebben op de positie in zoekresultaten van zoekmachines omdat metagegevens van de afbeelding zelf pas beschikbaar worden op het moment dat de pagina wordt geladen. Crawlers van zoekprogramma’s lezen alleen de HTML-code en zien daarom de afbeeldingen niet als inhoud op de pagina. Afbeeldingen zijn een van de factoren die bijdragen aan de weergavepositie van pagina’s in zoekresultaten. U kunt dit probleem omzeilen door inleidende tekst voor uw afbeeldingen te gebruiken.

GitHub-voorbeeldcode: JavaScript invoegen om prestaties te verbeteren

Lees het artikel en het codevoorbeeld betreffende het invoegen van JavaScript op GitHub.

Zie ook

Ondersteunde browsers in Office 2014 en Office 365 ProPlus

How to: Apply a master page to a site in SharePoint 2013 (Procedure: Een basispagina toepassen op een site in SharePoint 2013)

How to: Create a page layout in SharePoint 2013 (Procedure: Een pagina-indeling maken in SharePoint 2013)

Uw vaardigheden uitbreiden
Training verkennen
Als eerste nieuwe functies krijgen
Deelnemen aan Office Insiders

Was deze informatie nuttig?

Bedankt voor uw feedback.

Hartelijk dank voor uw feedback! Het lijkt ons een goed idee om u in contact te brengen met een van onze Office-ondersteuningsagents.

×