Office
Logg på

Utsett lasting av bilder og JavaScript i SharePoint Online

Denne artikkelen beskriver hvordan du kan redusere innlastingstiden for SharePoint Online-sider ved å bruke JavaScript til å forsinke innlasting av bilder, og ved å vente med å laste inn unødvendig JavaScript til siden er lastet inn.

Bilder kan ha en negativ påvirkning på innlastingshastighet for SharePoint Online. Som standard henter de fleste moderne nettlesere forhåndsdefinerte bilder når du laster inn en HTML-side. Dette kan føre til at siden lastes inn unødvendig sakte hvis bildene ikke er synlige på skjermen før brukeren ruller nedover på siden. Bilder kan blokkere nettleseren fra å laste inn den synlige delen av siden. Du kan omgå dette problemet ved å bruke JavaScript til å velge at bildene ikke skal lastes inn først. Unødvendig innlasting av JavaScript kan også redusere innlastingstiden på SharePoint-sidene. Dette emnet beskriver noen metoder du kan bruke til å forbedre innlastingstiden på siden med JavaScript i SharePoint Online.

Forbedre innlastingstiden på siden ved å forsinke innlasting av bilder på SharePoint Online-sider ved å bruke JavaScript

Du kan bruke JavaScript til å hindre at en nettleser henter inn forhåndsdefinerte bilder. Dette gjør den generelle gjengivelsen av siden raskere. Hvis du vil fjerne verdien av src-attributtet fra <img>-koden og erstatte det med banen til en fil i et dataattributt som for eksempel: data src. Eksempel:

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

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

For å få til dette må du bruke JavaScript.

I en tekstfil definerer du isElementInViewport()   -funksjonen til å kontrollere om et element er plassert i delen av nettleseren som er synlig for brukeren.

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

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

Hent til slutt loadItemsInView()    fra window.onscroll()    som vist i eksemplet nedenfor. Dette sikrer at bilder som er i visningsområdet, lastes inn når brukeren har behov for 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 Online må du knytte følgende funksjon til rulle-hendelsen på #s4-workspace <div>-koden. Årsaken til dette er at vindushendelser overstyres for å sikre at båndet fortsatt er 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 en hovedside i SharePoint Online. Du gjør dette ved å legge til en skriptkobling i toppteksten på hovedsiden. Når det ligger på en hovedside, brukes JavaScript på alle sidene på SharePoint Online-området som bruker det aktuelle hovedsideoppsettet. Hvis du derimot bare ønsker å bruke dette på én side på nettstedet, bruker du skriptredigeringen Nettdel for å bygge inn JavaScript på siden. Se disse emnene for mer informasjon:

Eksempel: Referere til filen JavaScript delayLoadImages.js fra en hovedside i SharePoint Online   

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

Skjermbilde som viser ett bilde lastet inn på siden

Følgende skjermbilde viser resten av bildene som lastes ned når brukeren ruller nedover skjermen og de kommer til syne.

Skjermbilde som viser flere bilder lastet inn på siden

Å forsinke bildeinnlastingen ved hjelp av JavaScript kan være en effektiv teknikk for å øke ytelsen, men hvis teknikken brukes på et offentlig nettsted, kan ikke søkemotorene kravlesøke bildene på samme måte som de kravlesøker bilder med vanlig formatering. Dette kan påvirke rangeringen i søkemotorer, fordi metadata på selve bildet egentlig ikke er der før siden lastes inn. Søkemotorens søkerobot leser bare HTML-koden, og ser derfor ikke bildene som innhold på siden. Bilder er én av faktorene som brukes til å rangere sider i søkeresultatene. Én måte å omgå dette på, er å bruke innledningstekst for bildene.

Eksempel på GitHub-kode: Sette inn JavaScript for å forbedre ytelsen

Gå ikke glipp av artikkelen om og kodeeksempelet for JavaScript-innsetting på GitHub.

Se også

Nettlesere som støttes i Office 2013 og Office 365 ProPlus

Fremgangsmåte: Bruke en hovedside på et område i SharePoint 2013

Fremgangsmåte: Opprette et sideoppsett i SharePoint 2013

Bli bedre på Office
Utforsk opplæring
Vær først ute med de nye funksjonene
Bli med i Office Insiders

Var denne informasjonen nyttig?

Takk for tilbakemeldingen!

Takk for tilbakemeldingen! Det høres ut som det kan være lurt å sette deg i kontakt med én av våre Office-kundestøtteagenter.

×