Utsett innlasting 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 også ved å vente med å laste inn ikke-essensiell JavaScript til etter at siden er lastet inn.
Bilder kan påvirke innlastingshastigheten på siden negativt på SharePoint Online. Som standard henter de fleste moderne nettlesere bilder når du laster inn en HTML-side. Dette kan føre til at siden lastes inn unødvendig sakte hvis bildene ikke vises 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. Dette emnet beskriver noen metoder du kan bruke til å forbedre sideinnlastingstidene med JavaScript i SharePoint Online.
Forbedre sideinnlastingstidene ved å forsinke innlasting av bilder på SharePoint Online-sider ved hjelp av JavaScript
Du kan bruke JavaScript til å hindre at en nettleser henter bilder på forhånd. Dette gjør den generelle dokumentgjengivelsen raskere. 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. For eksempel,
<img src="" data-src="/sites/NavigationBySearch/_catalogs/masterpage/media/microsoft-white-8.jpg" />
Ved å bruke 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 få alt dette til å skje, 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 &&
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 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. Dette 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 Online må du legge ved følgende funksjon i rullehendelsen på div-koden> for #s4-arbeidsområdet<. Dette er 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 Online. Du gjør dette ved å legge til en skriptkobling i toppteksten i hoveddokumentet. Når det er i et hoveddokument, brukes JavaScript på alle sidene på SharePoint Online-nettstedet som bruker dette hoveddokumentoppsettet. Hvis du har tenkt å bruke dette bare på én side på nettstedet, kan du bruke nettdelen for skriptredigering til å bygge inn JavaScript på siden. Se disse emnene for mer informasjon:
Eksempel: Referere til JavaScript-delayLoadImages.js-filen fra et hoveddokument i SharePoint Online
For at dette skal fungere, 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.
Det følgende skjermbildet viser resten av bildene som lastes ned etter at de ruller inn i visningen.
Å 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. Dette kan påvirke rangeringen på søkemotorer fordi metadata på selve bildet egentlig ikke er der før siden lastes inn. Søkemotorsøkere leser bare HTML-koden og vil derfor ikke se bildene som innhold på siden. Bilder er én av faktorene som brukes til å rangere sider i søkeresultater. Én måte å omgå dette på, 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