Dela via

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

  • Artikel

Artikeln beskriver hur du kan minska inläsningstiden för SharePoint-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 oviktigt JavaScript tills sidan har lästs in.

Bilder kan påverka sidinläsningshastigheten negativt på SharePoint. Som standard förinstallerar de flesta moderna webbläsare bilder när du läser in en HTML-sida. Den här processen kan göra att sidan blir 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äsningen av JavaScript göra nedladdningstiderna långsammare även på Dina SharePoint-sidor. I den här artikeln beskrivs några metoder som du kan använda för att förbättra sidinläsningstiderna med JavaScript i SharePoint.

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

Du kan använda JavaScript för att förhindra att en webbläsare förinstallerar avbildningar. Den här tekniken påskyndar den övergripande dokumentrendering. För att göra det 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" />

I den här metoden laddar inte webbläsaren 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.

För att utföra den här funktionen 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. Den här funktionen säkerställer att alla bilder som finns i visningsområdet 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 måste du koppla följande funktion till rullningshändelsen på taggen #s4-workspace <div> eftersom fönsterhändelser åsidosätts 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 är klar med att skriva delayLoadImages.js kan du lägga till innehållet i filen på en huvudsida i SharePoint 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å din SharePoint-webbplats som använder huvudsidelayouten. Om du vill använda funktionerna på en sida på webbplatsen kan du också använda webbdelen för skriptredigeraren för att bädda in JavaScript på sidan. Mer information finns i:

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

För att det här exemplet ska fungera måste du också 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 används på en offentlig webbplats kan sökmotorer inte crawla bilderna på samma sätt som de skulle crawla en regelbundet formad bild. Den här tekniken kan påverka rankningen på sökmotorer eftersom metadata på själva bilden inte finns där förrän sidan läses in. Search motorcrawlers läser bara HTML-koden och kan därför inte se bilderna som innehåll på sidan. Bilder är en av de faktorer som används för att rangordna sidor i sökresultat. En lösning är att använda inledande text 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