Odgoda učitavanja slika i JavaScript u sustavu SharePoint Online

U ovom se članku opisuje kako skratiti vrijeme učitavanja stranica sustava SharePoint Online pomoću jezika JavaScript putem odgađanja učitavanja slika te učitavanja nebitnih dijelova koda JavaScript tek nakon učitavanja stranice.

Slike mogu negativno utjecati na brzinu učitavanja slika u sustavu SharePoint Online. Većina modernih internetskih preglednika po zadanom unaprijed dohvaća slike prilikom učitavanja HTML stranice. Stranica se stoga može nepotrebno dugo učitavati ako slike nisu vidljive na zaslonu dok se korisnik ne pomakne prema dolje. Slike mogu blokirati učitavanje vidljivog dijela stranice u pregledniku. Da biste zaobišli taj problem, pomoću jezika JavaScript možete preskočiti prvo učitavanje slika. Vrijeme učitavanja stranica sustava SharePoint može produljiti i učitavanje nebitnih dijelova koda JavaScript. U ovoj se temi opisuju neke metode kojima pomoću jezika JavaScript možete ubrzati učitavanje stranica u sustavu SharePoint Online.

Brže učitavanje stranica odgađanjem učitavanja slika na stranicama sustava SharePoint Online pomoću jezika JavaScript

Pomoću jezika JavaScript možete web-pregledniku onemogućiti dohvaćanje slika unaprijed. Time se općenito ubrzava prikaz dokumenta. Da biste to učinili, u oznaci <img> uklonite vrijednost atributa src te je zamijenite putom do datoteke u podatkovnom atributu kao što je: data-src. Na primjer:

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

Tom metodom preglednik neće odmah preuzimati slike. Ako je slika već u vidnom polju, JavaScript obavještava preglednik da dohvati URL iz podatkovnog atributa te ga umetne kao vrijednost atributa src. Slika će se učitati samo kad se korisnik pomakne prema dolje i slika uđe u vidno polje.

Da biste sve to postigli, morate koristiti JavaScript.

U tekstnoj datoteci definirajte funkciju isElementInViewport()    tako da provjerava nalazi li se određeni element u dijelu preglednika koji je vidljiv korisniku.

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

Potom funkciju isElementInViewport()    iskoristite u funkciji loadItemsInView()   . Funkcija loadItemsInView()    učitat će sve slike koje imaju vrijednost atributa data-src ako se nalaze u dijelu preglednika koji je vidljiv korisniku. U tekstnu datoteku dodajte sljedeću funkciju:

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

Naposljetku pozovite funkciju loadItemsInView()    iz funkcije window.onscroll()   , kao što je prikazano u sljedećem primjeru. Na taj ćete način postići to da se sve slike koje su u vidnom polju učitaju kad zatrebaju korisniku, ali ne prije. U tekstnu datoteku dodajte sljedeće:

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

Za SharePoint Online morate u događaj pomicanja iz oznake #s4-workspace <div> dodati sljedeću funkciju. To je zato što se događaji prozora nadjačavaju da bi se zadržala vrpca pri vrhu stranice.

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

Spremite tekstnu datoteku kao datoteku jezika JavaScript s nastavkom .js, na primjer: delayLoadImages.js.

Kad završite s pisanjem datoteke delayLoadImages.js, sadržaj te datoteke možete dodati na osnovnu stranicu u sustavu SharePoint Online. To možete učiniti tako da u zaglavlje osnovne stranice dodate vezu na skriptu. Kad umetnete skriptu u osnovnu stranicu, JavaScript će se primijeniti na sve stranice web-mjesta sustava SharePoint Online s rasporedom osnovne stranice. Ako to pak želite koristiti samo na jednoj stranici web-mjesta, JavaScript možete ugraditi u stranicu pomoću web-dijela za uređivanje skripte. Dodatne informacije potražite u sljedećim temama:

Primjer: unos reference na datoteku delayLoadImages.js jezika JavaScript s osnovne stranice u sustavu SharePoint Online   

Da bi to funkcioniralo, morate na osnovnu stranicu unijeti i referencu na jQuery. U sljedećem primjeru vidljivo je da je prilikom prvog učitavanja stranice učitana samo jedna slika, ali na stranici postoji još nekoliko njih.

Snimka zaslona na kojoj se prikazuje jedna slika učitana na stranicu

Na sljedećoj snimci zaslona prikazuju se preostale slike koje se preuzimaju tek kad pomicanjem uđu u korisnikovo vidno polje.

Snimka zaslona na kojoj se prikazuje nekoliko slika učitanih na stranicu

Odgađanje učitavanja slika pomoću jezika JavaScript može biti učinkovit način poboljšanja performansi, no ako se ta tehnika primijeni na javno web-mjesto, tražilice neće moći na isti način pretražiti slike radi indeksiranja kao što bi to učinile s obično oblikovanim slikama. To može utjecati na rangiranje na tražilicama jer metapodaci same slike zapravo ne postoje dok se stranica ne učita. Pretraživači tražilica čitaju samo HTML, pa neće vidjeti slike kao sadržaj stranice. Slike su jedan od čimbenika koji se koriste za rangiranje stranica u rezultatima pretraživanja. To možete zaobilazno riješiti tako da umetnete uvodni tekst za slike.

Ogledni kod servisa GitHub: ubacivanje jezika JavaScript za bolje performanse

Ne propustite članak i primjer koda za ubacivanje jezika JavaScript na servisu GitHub.

Dodatni sadržaji

Podržani preglednici u sustavima Office 2013 i Office 365 ProPlus

Upute: primjena osnovne stranice na web-mjesto sustava SharePoint 2013

Upute: stvaranje rasporeda stranice u sustavu SharePoint 2013

Proširite svoje vještine
Istražite osposobljavanje

Jesu li vam ove informacije bile korisne?

Hvala vam na povratnim informacijama!

Hvala vam na povratnim informacijama! Čini se da bi vam pomoglo kad bismo vas povezali s nekim od naših agenata podrške za Office.

×