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

I den här artikeln beskrivs 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 irrelevanta JavaScript tills sidan har laddats.

Bilder kan påverka inläsningshastigheten för sidor i SharePoint Online negativt. Som standard hämtar de flesta moderna webbläsare bilder i förväg när de läser in en HTML-sida. Det kan leda till att sidan tar onödigt lång tid att läsa in om bilderna inte syns 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. Det här problemet kan du kringgå genom att använda JavaScript för att hoppa över inläsningen av bilder i förväg. Inläsningen av mindre viktig JavaScript kan också få laddningen av SharePoint-sidor att gå långsammare. I det här avsnittet beskrivs några metoder som du kan använda för att förbättra sidladdningstiderna med JavaScript i SharePoint Online.

Förbättra sidladdningstiderna genom att fördröja inläsningen av bilder 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. Det gör att den övergripande dokumentåtergivningen går snabbare. Om du vill göra det här tar du bort värdet för src-attributet från <img>-taggen och ersätter den med sökvägen till en fil i ett dataattribut, till exempel: data-src. Till exempel:

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

Med den här metoden läser webbläsaren inte in bilderna direkt. Om bilden redan finns i visningsområdet medför informationen från JavaScript till webbläsaren att webbadressen hämtas från dataattributet och infogas som värde för attributet src. Bilden läses bara in när användaren rullar och den kommer in i visningsområdet.

För att allt detta ska ske måste du använda JavaScript.

Definiera funktionen isElementInViewport()    i en textfil 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 &&
    rect.left >= 0 &&
    rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) &&
    rect.right <= (window.innerWidth || document.documentElement.clientWidth) 
  );
}

Använd sedan isElementInViewport()    i funktionen loadItemsInView()   . Funktionen loadItemsInView()    laddar 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. Det garanterar att alla bilder som finns i visningsområdet laddas 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-workspace <div>-taggen. Det här beror på att fönsterhändelserna åsidosätts för att säkerställa att menyfliksområdet förblir kopplat till översta delen av sidan.

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

Spara textfilen som en JavaScript-fil med filnamnstillä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 Online. Det gör du genom att lägga till en skriptlänk i sidhuvudet på huvudsidan. När JavaScript väl finns på en huvudsida används det på alla sidor på din SharePoint Online-webbplats som använder den huvudsidslayouten. Men om du bara tänker använda det på en sida på webbplatsen kan du i stället använda webbdelsskriptredigeraren för att bädda in JavaScript på sidan. Mer information finns i följande avsnitt:

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

För att det här ska fungera måste du också referera till jQuery på huvudsidan. I följande exempel kan du se att i den första sidinläsningen finns det bara en bild inläst, men det finns många flera bilder på sidan.

Skärmbild med en bild som läses in på sidan

På skärmbilden nedan visas resten av bilderna som läses in när de rullas in i visningsområdet.

Skärmbild med flera bilder laddade på sidan

Att fördröja bildinläsningen med hjälp av JavaScript kan vara en effektiv teknik för att öka prestandan, men om tekniken används på en offentlig webbplats kan sökmotorerna inte crawla igenom bilderna på samma sätt som de skulle crawla bilder som är formaterade på vanligt sätt. Detta kan påverka rangordningen på sökmotorer eftersom metadata på själva bilden inte verkligen finns där förrän sidan läses in. Sökmotorcrawlers 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ökresultaten. Ett sätt att kringgå det här problemet är att använda introduktionstexter för bilderna.

Exempel på GitHub-kod: Mata in JavaScript för att förbättra prestandan

Missar inte artikeln och kodexemplet på JavaScript-inmatning som visas på GitHub.

Mer information finns i

Webbläsare som stöds av Office 2013 och Office 365 ProPlus

Så här gör du för att: Använda en huvudsida för en webbplats i SharePoint 2013

Så här gör du för att: Skapa en sidlayout i SharePoint 2013

Utöka dina kunskaper
Utforska utbildning
Få nya funktioner först
Anslut till Office Insiders

Hade du nytta av den här informationen?

Tack för din feedback!

Tack för din feedback! Det låter som att det kan vara bra att koppla dig till en av våra Office-supportrepresentanter.

×