Forsink indlæsning af billeder og JavaScript i SharePoint Online

I denne artikel beskrives, hvordan du kan reducere indlæsningstiden for SharePoint Online-sider ved at bruge JavaScript til at forsinke indlæsningen af billeder og også vente med indlæsning af mindre vigtige JavaScript indtil efter indlæsning af siden.

Billeder kan påvirke hastighederne af sideindlæsning på SharePoint Online negativt. Som standard foretager de fleste moderne internetbrowsere en indledende overførsel af billeder, når der indlæses en HTML-side. Dette kan få indlæsningen af siden til at være unødvendigt langsom, hvis billederne ikke er synlige på skærmen, før brugeren ruller nedad. Billederne kan blokere browseren i at indlæse den synlige dele af siden. Du kan omgå dette problem ved at bruge JavaScript til at springe over først at indlæse billederne. Desuden kan indlæsning af ikke vigtige JavaScript også gøre indlæsningstiderne langsommere på dine SharePoint-sider. I dette emne beskrives nogle metoder, du kan bruge til at forbedre tiderne for sideindlæsning med JavaScript i SharePoint Online.

Gør tiderne for sideindlæsning bedre ved at forsinke billedindlæsning på SharePoint Online-sider ved at bruge JavaScript

Du kan bruge JavaScript til at forhindre en webbrowser i at foretage en indledende overførsel af billeder. Dette øger hastigheden af den samlede dokumentgengivelse. Det gøres ved at fjerne værdien af src-attributten fra koden <img> og udskifte den med stien til en fil i en dataattribut, f.eks.: data-src. Det kunne f.eks. være:

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

Ved at bruge denne metode downloader browseren ikke billederne med det samme. Hvis billedet allerede findes i visningsporten, beder JavaScript browseren om at hente URL-adressen fra dataattributten og indsætter den som værdi for src-attributten. Billedet indlæses først, når brugeren ruller, og det kommer ind i visningen.

Du skal bruge JavaScript for at få det hele til at ske.

I en tekstfil skal du definere funktionen isElementInViewport()    til at kontrollere, om et element findes i den del af browseren, der er synlig for brugeren.

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

Brug derefter isElementInViewport()    i funktionen loadItemsInView()   . Funktionen loadItemsInView()    vil indlæse alle billeder, der har en værdi for data-src-attributten, hvis de findes i den del af browseren, der er synlig for brugeren. Føj følgende funktion til tekstfilen:

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

Kald til sidst loadItemsInView()    fra window.onscroll()   , som vist i følgende eksempel. Dette sikrer, at alle billeder, der findes i visningsporten, indlæses, når brugeren har brug for dem, og ikke før. Føj følgende til tekstfilen:

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

For SharePoint Online skal du føje følgende funktion til rullehandlingen i koden #s4-workspace <div>. Det skyldes, at vindueshændelser tilsidesættes for at sikre, at båndet forbliver fastgjort til toppen af siden.

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

Gem tekstfilen som en JavaScript-fil med filtypenavnet .js, f.eks. delayLoadImages.js.

Når du har skrevet delayLoadImages.js, kan du føje indholdet af filen til en masterside i SharePoint Online. Det gør du ved at føje et scriptlink til sidehovedet på mastersiden. Når det findes på mastersiden, anvendes JavaScript på alle sider på dit SharePoint Online-websted, der anvender det pågældende mastersidelayout. Hvis du i stedet kun vil bruge dette på én side på dit websted, skal du bruge webdelen for scripteditoren til at integrere JavaScript på siden. Se disse emner for at få flere oplysninger:

Eksempel: Henvis til filen JavaScript delayLoadImages.js fra en masterside i SharePoint Online   

Dette virker kun, hvis du også henviser til jQuery på mastersiden. I følgende eksempel kan du se under den indledende sideindlæsning, at der kun er ét billede indlæst, men der er mange flere på siden.

Skærmbillede med ét billede indlæst på siden

Følgende skærmbillede viser resten af de billeder, der downloades i takt med, at de rulles ind i visningen.

Skærmbillede med flere billeder indlæst på siden

Forsinkelse af billedindlæsning gennem brug af JavaScript kan være en effektiv teknik til at øge ydeevnen. Hvis teknikken anvendes på et offentligt websted, vil søgemaskiner dog ikke kunne gennemsøge billederne på samme måde, som de ville gennemsøge et almindeligt udformet billede. Dette kan påvirke klassificeringer på søgemaskiner, fordi metadata på selve billedet ikke virkelig er der, indtil siden indlæses. Søgemaskiners crawlere læser udelukkende HTML og vil derfor ikke se billederne som indhold på siden. Billeder er kun én af de faktorer, der bruges til at klassificere sider i søgeresultater. Én måde, som det kan omgås på, er at bruge introduktionstekst til dine billeder.

GitHub-kodeeksempel: Indsætte JavaScript for at forbedre ydeevnen

Sørg endelig for at se artiklen om og kodeeksemplet på JavaScript-indsættelse, som findes på GitHub.

Se også

Understøttede browsere i Office 2013 og Office 365 ProPlus

Sådan: Anvend en masterside på et websted i SharePoint 2013

Sådan: Opret et sidelayout i SharePoint 2013

Udvid dine færdigheder
Gå på opdagelse i kurser
Få nye funktioner først
Bliv Office Insider

Var disse oplysninger nyttige?

Tak for din feedback!

Tak for din feedback! Det lyder, som om det vil kunne hjælpe, hvis du bliver sat i forbindelse med en af vores Office-supportteknikere.

×