Zakasnitev nalaganja slik in JavaScripta v storitvi SharePoint Online

V tem članku je opisano, kako lahko zmanjšate čas nalaganja za strani storitve SharePoint Online tako, da s skriptom JavaScript poskrbite za zakasnitev pri nalaganju slik, in tako, da nalaganje skriptov JavaScript, ki niso ključni, izvedete šele po tem, ko se stran naloži.

Slike lahko negativno vplivajo na hitrost nalaganja strani v storitvi SharePoint Online. Večina sodobnih spletnih brskalnikov med nalaganjem strani HTML vnaprej dobi slike. To lahko privede do tega, da se stran po nepotrebnem počasi nalaga, če slike niso vidne na zaslonu, dokler se uporabnik ne premakne dol. Slike lahko brskalniku onemogočajo nalaganje vidnega dela strani. Če želite odpraviti za to težavo, lahko uporabite JavaScript tako, da slike niso naložene prve. Nalaganje skriptov JavaScript, ki niso ključni, lahko prav tako upočasni nalaganje SharePointovih strani. V tej temi so opisani nekateri načini, kako lahko izboljšate hitrost nalaganja strani s skriptom JavaScript v storitvi SharePoint Online.

Izboljšajte hitrost nalaganja strani z zakasnitvijo nalaganja slik na straneh v storitvi SharePoint Online s skriptom JavaScript

S skriptom JavaScript lahko spletnemu brskalniku preprečite vnaprejšnje dobivanje slik. To pospeši splošno hitrost upodabljanja dokumenta. Če želite to narediti, odstranite vrednost stributa src z oznake <img> in jo zamenjajte s potjo do datoteke v atributu podatkov, kot je na primer: data-src. Primer:

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

Če uporabite ta način, brskalnik ne prenese nemudoma slik. Če je slika že v vidnem polju, JavaScript sporoči brskalniku, da dobi URL iz atributa podatkov in njegovo vrednost vstavi kot vrednost atributa src. Slika se naloži le takrat, ko se uporabnik premakne dol, slika pa pride v vidno polje.

Če želite to izvesti, boste morali uporabiti JavaScript.

V besedilni datoteki funkcijo isElementInViewport()    nastavite tako, da bo preverila, ali je element v delu spletnega brskalnika, ki ga uporabnik vidi.

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

Nato uporabite element isElementInViewport()    v funkciji loadItemsInView()   . Funkcija loadItemsInView()    bo naložila vse slike, ki imajo vrednost za atribut data-src, če so v delu brskalnika, ki ga uporabnik vidi. Besedilni datoteki dodajte to funkcijo:

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

Na koncu prikličite vrednost loadItemsInView()    v razdelku window.onscroll()   , kot prikazuje ta primer. Tako poskrbite, da so slike, ki so prikazane v vidnem polju, naložene, ko jih uporabnik potrebuje, vendar ne prej. Besedilni datoteki dodajte to:

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

Za SharePoint Online morate dogodku premikanja priložiti to funkcijo v oznaki #s4-workspace <div>. To je zato, ker so dogodki okna preglašeni, da ostane trak na vrhu strani.

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

Shranite besedilno datoteko kot datoteko JavaScript s pripono .js, na primer delayLoadImages.js.

Ko napišete delayLoadImages.js, lahko vsebino datoteke dodate na stran z matrico v storitvi SharePoint Online. To naredite tako, da dodate povezavo skripta v glavo na strani z matrico. Ko je ta na strani z matrico, bo skript JavaScript uporabljen za vse strani na spletnem mestu storitve SharePoint Online, ki uporabljajo postavitev strani z matrico. Če želite to uporabljati le za eno stran spletnega mesta, uporabite spletni gradnik urejevalnika skripta in z njim vdelajte JavaScript na stran. Več informacij najdete v teh temah:

Primer: sklicevanje na datoteko JavaScript delayLoadImages.js s strani z matrico v storitvi SharePoint Online   

Če želite, da bo to delovalo, morate ustvariti tudi sklic na jQuery na strani z matrico. V tem primeru lahko na prvotnem času nalaganja vidite, da je naložena le ena slika, vendar jih je na strani več.

Posnetek zaslona z eno sliko, naloženo na strani

Ta posnetek zaslona prikazuje preostale slike, ki so prenesene, ko so premaknjene v pogled.

Posnetek zaslona z več slikami, naloženimi na strani

Zakasnitev nalaganja slik s skriptom JavaScript je lahko učinkovit način za izboljšanje učinkovitosti. Toda če tehniko uporabite za javno spletno mesto, mehanizmi za iskanje ne morejo preiskati slik na enak način, kot bi jih pri navadno oblikovani sliki. To lahko vpliva na postavitev med rezultati mehanizmov za iskanje, saj metapodatki slike dejansko niso tam, dokler se stran ne naloži. Iskalniki mehanizmov za iskanje lahko berejo le HTML, zato ne bodo videli slik kot vsebino na strani. Slike so eden od dejavnikov pri razvrščanju strani med rezultati iskanja. To lahko zaobidete tako, da za slike uporabite predstavitveno besedilo.

Vzorec kode GitHub: izboljšanje učinkovitosti z vstavljanjem skripta JavaScript

Oglejte si članek in primer kode za vstavljanje skripta JavaScript, ki je na voljo na spletnem mestu GitHub.

Glejte tudi

Podprti brskalniki v sistemu Office 2013 in Office 365 ProPlus

Navodila: Uporaba strani z matrico za spletno mesto v storitvi SharePoint 2013

Navodila: Ustvarjanje postavitve strani v storitvi SharePoint 2013

Razširite svoja znanja
Oglejte si izobraževanje
Prvi dobite nove funkcije
Pridružite se programu Office Insider

Vam je bila informacija v pomoč?

Zahvaljujemo se vam za povratne informacije.

Zahvaljujemo se vam za povratne informacije. Videti je, da bi vam prišla prav pomoč enega od naših Officeovih agentov za podporo.

×