Fördröj inläsning av bilder och JavaScript i SharePoint Online

Den här artikeln beskriver hur du kan minska inläsningstiden för SharePoint Online-sidor genom att använda JavaScript för att fördröja inläsningen av bilder och även genom att vänta med att läsa in icke-grundläggande JavaScript tills sidan har lästs in.

Bilder kan påverka sidinläsningshastigheten negativt på SharePoint Online. Som standard hämtar de flesta moderna webbläsare bilder i förväg när du läser in en HTML-sida. Detta kan göra att sidan blir onödigt långsam att läsa in om bilderna inte visas på skärmen förrän användaren rullar nedåt. Bilderna kan blockera webbläsaren från att läsa in den synliga delen av sidan. Om du vill undvika det här problemet kan du använda JavaScript för att hoppa över inläsningen av bilderna först. Dessutom kan inläsning av icke-grundläggande JavaScript göra nedladdningstider långsammare på dina SharePoint-sidor. I det här avsnittet beskrivs några metoder som du kan använda för att förbättra sidinläsningstiderna med JavaScript i SharePoint Online.

Förbättra sidinläsningstiderna genom att fördröja bildinläsningen på SharePoint Online-sidor med hjälp av JavaScript

Du kan använda JavaScript för att förhindra att en webbläsare hämtar bilder i förväg. Detta påskyndar den övergripande dokumentrendering. För att göra detta tar du bort värdet för src-attributet från img-taggen <> och ersätter det med sökvägen till en fil i ett dataattribut som: data-src. Till exempel:

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

Med den här metoden laddar webbläsaren inte ned bilderna omedelbart. Om avbildningen redan finns i viewporten uppmanar JavaScript webbläsaren att hämta URL:en från dataattributet och infoga den som värde för src-attributet. Bilden läses bara in när användaren rullar och den visas.

Om du vill få allt detta att hända måste du använda JavaScript.

I en textfil definierar du funktionen isElementInViewport() för att kontrollera om ett element finns i den del av webbläsaren som är synlig för användaren.

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

Använd sedan isElementInViewport() i funktionen loadItemsInView(). Funktionen loadItemsInView() läser in alla bilder som har ett värde för attributet data-src om de finns i den del av webbläsaren som är synlig för användaren. Lägg till följande funktion i textfilen:

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

Anropa slutligen loadItemsInView() inifrån window.onscroll() enligt följande exempel. Detta säkerställer att alla bilder som finns i viewport läses in när användaren behöver dem, men inte tidigare. Lägg till följande i textfilen:

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

För SharePoint Online måste du koppla följande funktion till rullningshändelsen på #s4-arbetsytans <div-tagg> . Det beror på att fönsterhändelserna åsidosättas för att säkerställa att menyfliksområdet förblir kopplat till sidans överkant.

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

Spara textfilen som en JavaScript-fil med tillägget .js, till exempel delayLoadImages.js.

När du har skrivit delayLoadImages.js kan du lägga till innehållet i filen på en huvudsida i SharePoint Online. Det gör du genom att lägga till en skriptlänk i rubriken på huvudsidan. När den är på en huvudsida tillämpas JavaScript på alla sidor på SharePoint Online-webbplatsen som använder huvudsidelayouten. Om du endast tänker använda detta på en sida på webbplatsen kan du använda webbdelen för skriptredigeraren för att bädda in JavaScript på sidan. Mer information finns i de här avsnitten:

Exempel: Referera till JavaScript-delayLoadImages.js-filen från en huvudsida i SharePoint Online

För att detta ska fungera måste du även referera till jQuery på huvudsidan. I följande exempel kan du se i den första sidinläsningen att det bara finns en bild som läses in, men det finns flera fler på sidan.

Skärmbild som visar en bild som lästs in på sidan.

Följande skärmbild visar resten av bilderna som laddas ned när de har rullats in i vyn.

Skärmbild som visar flera bilder som lästs in på sidan.

Fördröjning av bildinläsning med hjälp av JavaScript kan vara en effektiv teknik för att öka prestanda. Men om tekniken tillämpas på en offentlig webbplats kan sökmotorer inte crawla bilderna på samma sätt som de skulle crawla en regelbundet formad bild. Detta kan påverka rankningen på sökmotorer eftersom metadata på själva bilden inte finns där förrän sidan läses in. Sökrobotar läser bara HTML-koden och ser därför inte bilderna som innehåll på sidan. Bilder är en av de faktorer som används för att rangordna sidor i sökresultat. Ett sätt att kringgå detta är att använda introduktionstext för dina bilder.

GitHub-kodexempel: Mata in JavaScript för att förbättra prestanda

Missa inte artikeln och kodexemplet för JavaScript-inmatning som tillhandahålls på GitHub.

Se även

Webbläsare som stöds i Office 2013 och Microsoft 365-appar för företag

Anvisningar: Tillämpa en huvudsida på en webbplats i SharePoint 2013

Anvisningar: Skapa en sidlayout i SharePoint 2013