Del via

Utsett innlasting av bilder og JavaScript i SharePoint

  • Artikkel

Artikkelen beskriver hvordan du kan redusere innlastingstiden for SharePoint-sider ved å bruke JavaScript til å forsinke innlasting av bilder, og også ved å vente med å laste inn ikke-ssential JavaScript til etter at siden er lastet inn.

Bilder kan påvirke innlastingshastigheten på siden negativt i SharePoint. Som standard vil de fleste moderne nettlesere forhåndsfekture bilder når du laster inn en HTML-side. Denne prosessen kan føre til at siden lastes inn sakte hvis bildene ikke er synlige på skjermen før brukeren ruller nedover. Bildene kan blokkere nettleseren fra å laste inn den synlige delen av siden. Hvis du vil omgå dette problemet, kan du bruke JavaScript til å hoppe over innlasting av bildene først. Innlasting av ikke-essensiell JavaScript kan også redusere nedlastingstiden på SharePoint-sidene. Denne artikkelen beskriver noen metoder du kan bruke til å forbedre sideinnlastingstidene med JavaScript i SharePoint.

Forbedre sideinnlastingstidene ved å forsinke innlasting av bilder på SharePoint-sider ved hjelp av JavaScript

Du kan bruke JavaScript til å hindre at en nettleser sender bilder på forhånd. Denne teknikken øker hastigheten på generell dokumentgjengivelse. Hvis du vil gjøre dette, fjerner du verdien for src-attributtet fra <img-koden> og erstatter den med banen til en fil i et dataattributt, for eksempel: data-src. Eksempel:

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

I denne metoden laster ikke nettleseren ned bildene umiddelbart. Hvis bildet allerede er i visningsporten, ber JavaScript nettleseren om å hente nettadressen fra dataattributtet og sette det inn som verdien for src-attributtet. Bildet lastes bare inn når brukeren ruller, og det kommer til syne.

Hvis du vil utføre denne funksjonen, må du bruke JavaScript.

Definer isElementInViewport() -funksjonen i en tekstfil for å kontrollere om et element er i den delen av nettleseren som er synlig for brukeren.

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

Deretter bruker du isElementInViewport() i loadItemsInView() -funksjonen. LoadItemsInView()-funksjonen laster inn alle bilder som har en verdi for data-src-attributtet hvis de er i den delen av nettleseren som er synlig for brukeren. Legg til følgende funksjon i 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"));
          }
      }
  });
}

Til slutt kaller du loadItemsInView() fra window.onscroll() som vist i eksemplet nedenfor. Denne funksjonen sikrer at alle bilder som er i visningsporten lastes inn etter hvert som brukeren trenger dem, men ikke før. Legg til følgende i tekstfilen:

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

For SharePoint må du knytte følgende funksjon til rullehendelsen på #s4-arbeidsområde-div-koden <> fordi vindushendelsene overstyres for å sikre at båndet forblir festet til toppen av siden.

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

Lagre tekstfilen som en JavaScript-fil med filtypen .js, for eksempel delayLoadImages.js.

Når du er ferdig med å skrive delayLoadImages.js, kan du legge til innholdet i filen i et hoveddokument i SharePoint ved å legge til en skriptkobling i toppteksten i hoveddokumentet. Når det er i et hoveddokument, brukes JavaScript på alle sidene på SharePoint-nettstedet som bruker dette hoveddokumentoppsettet. Hvis du har tenkt å bare bruke funksjonaliteten på én side på nettstedet, kan du eventuelt bruke nettdelen for skriptredigering til å bygge inn JavaScript på siden. Hvis du vil ha mer informasjon, kan du se:

Eksempel: Referere til JavaScript-delayLoadImages.js-filen fra et hoveddokument i SharePoint

I dette eksemplet må du også referere til jQuery i hoveddokumentet. I eksemplet nedenfor kan du se i innlastingen av den første siden at det bare er ett bilde lastet inn, men det er flere på siden.

Skjermbilde som viser ett bilde lastet inn på siden.

Det følgende skjermbildet viser resten av bildene som lastes ned etter at de ruller inn i visningen.

Skjermbilde som viser flere bilder som er lastet inn på siden.

Å forsinke innlasting av bilder ved hjelp av JavaScript kan være en effektiv teknikk for å øke ytelsen. Hvis teknikken brukes på et offentlig nettsted, kan imidlertid ikke søkemotorer kravlesøke bildene på samme måte som de kravlesøker et bilde med jevne mellomrom. Denne teknikken kan påvirke rangeringer på søkemotorer fordi metadata på selve bildet ikke er der før siden lastes inn. Søk leser bare HTML-koden og kan derfor ikke se bildene som innhold på siden. Bilder er én av faktorene som brukes til å rangere sider i søkeresultater. En løsning er å bruke innledende tekst for bildene dine.

GitHub-kodeeksempel: Sette inn JavaScript for å forbedre ytelsen

Ikke gå glipp av artikkelen og kodeeksempelet på JavaScript-injeksjon som er angitt på GitHub.

Se også

Nettlesere som støttes i Office 2013 og Microsoft 365 Apps for enterprise

Slik bruker du et hoveddokument på et område i SharePoint 2013

Fremgangsmåte: Opprett et sideoppsett i SharePoint 2013