Odlaganje učitavanja slika i JavaScript skripta u usluzi SharePoint Online

Ovaj članak opisuje kako možete da smanjite vreme učitavanja za SharePoint Online stranice pomoću JavaScript za odlaganje učitavanja slika, kao i odlaganjem učitavanja nebitnih JavaScript dok ste stranica ne učita.

Slike mogu negativno da utiču na brzine učitavanja stranice na SharePoint Online. Prema podrazumevanim postavkama, većina savremenih Internet pregledača unapred dobavlja slike prilikom učitavanja HTML stranice. To može da izazove da se stranica nepotrebno sporo učitava, ako slike nisu vidljive na ekranu dok korisnik ne pomeri nadole. Slike mogu da spreče pregledač da učita vidljivi deo stranice. Da biste rešili ovaj problem, možete da koristite JavaScript da biste preskočili da se slike prve učitavaju. Takođe, učitavanje nebitne JavaScript može i da uspori vremena učitavanja i na SharePoint stranicama. Ova tema opisuje neke metode koje možete da koristite da biste poboljšali vremena učitavanja stranica sa JavaScript u SharePoint Online.

Poboljšavanje vremena učitavanja stranice odlaganjem učitavanja slika u SharePoint Online stranicama pomoću JavaScript

Možete da koristite JavaScript da biste sprečili da veb pregledač unapred dobavlja slike. To ubrzava celokupno prikazivanje dokumenta. Da biste to uradili, uklonite vrednost atributa src iz oznake <img> i zamenite je putanjom do datoteke u atributu podatka kao što je: data-src. Na primer:

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

Pomoću ovog metoda, pregledač ne preuzima slike odmah. Ako je slika već u prikazu, JavaScript govori pregledaču da preuzme URL iz atributa podatka i da ga umetne kao vrednost za atribut src. Slika se učitava tek kada korisnik pomera i kada ona dođe u prikaz.

Da bi se sve to dogodilo, biće potrebno da upotrebite JavaScript.

U tekstualnoj datoteci definišite funkciju isElementInViewport()    da biste proverili da li je element u delu pregledača 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) 
  );
}

Dalje, koristite isElementInViewport()    u funkciji loadItemsInView()   . Funkcija loadItemsInView()    će učitati sve slike koje imaju vrednost za atribut data-src, ako su u delu pregledača koji je vidljiv korisniku. Dodajte sledeću funkciju u tekstualnu datoteku:

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

Konačno, pozovite loadItemsInView()    unutar window.onscroll()    kao što je prikazano u sledećem primeru. Ovim se obezbeđuje da se sve slike koje su u prikazu učitavaju onda kada su potrebne korisniku, ali ne i ranije. Dodajte sledeće u tekstualnu datoteku:

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

Za SharePoint Online, morate da priložite sledeću funkciju događaju pomeranja na #s4-workspace <div> oznaci. To je zbog toga što su događaji prozora zamenjeni, da bi se osiguralo da traka ostane priložena vrhu stranice.

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

Sačuvajte tekstualnu datoteku kao JavaScript datoteku sa oznakom tipa datoteke .js, na primer delayLoadImages.js.

Kada završite sa pisanjem delayLoadImages.js, možete da dodate sadržaj datoteke master stranici u SharePoint Online. To radite tako što ćete dodati vezu ka skripti u zaglavlju master stranice. Kada je dodata u master stranicu, JavaScript će biti primenjen na sve stranice na vašem SharePoint Online sajtu koje koriste taj master raspored na stranici. Alternativno, ako nameravate da to koristite samo na jednoj stranici sajta, upotrebite uređivač skripte Veb segment da ugradite JavaScript u stranicu. Pogledajte sledeće teme za više informacija:

Primer: Upućivanje na JavaScript delayLoadImages.js datoteku iz master stranice u SharePoint Online   

Da bi ovo funkcionisalo, morate takođe da ukažete na jQuery u master stranici. U sledećem primeru, možete da vidite da je u početnom učitavanju stranice učitana samo jedna slika, ali ih postoji još nekoliko na stranici.

Snimak ekrana koji prikazuje jednu sliku učitanu na stranici

Sledeći snimak ekrana prikazuje ostale slike koje se preuzimaju nakon što se pomere u prikaz.

Snimak ekrana koji prikazuje nekoliko slika učitanih na stranici

Odlaganje učitavanja slika pomoću JavaScript može da bude efikasna tehnika povećanja performansi; Međutim, ako se tehnika primeni na javni veb sajt, onda pretraživači ne mogu da popisuju slike na isti način na koji bi popisivali uobičajeno oblikovanu sliku. To može da utiče na rangiranje na pretraživačima zato što metapodaci na samoj slici ne postoje zaista sve dok se stranica ne učita. Popisivači pretraživača čitaju samo HTML i zbog toga neće videti slike kao sadržaj na stranici. Slike su jedan od faktora koji se koriste za rangiranje stranica u rezultatima pretrage. Jedan način da se to izbegne je da se koristi uvodni tekst za slike.

Uzorak GitHub koda: Ubrizgavanje JavaScript radi poboljšanja performansi

Ne propustite članak i uzorak koda na lokaciji JavaScript injekcija koje se nalaze na sajtu GitHub.

Takođe pogledajte

Podržani pregledači u sistemu Office 2013 i usluzi Office 365 ProPlus

Kako da: Primenite master stranicu na sajtu u sistemu SharePoint 2013

Kako da: Kreirate raspored na stranici u sistemu SharePoint 2013

Unapredite veštine
Istražite obuku
Prvi nabavite nove funkcije
Pridružite se Office Insider korisnicima

Da li su vam ove informacije koristile?

Hvala vam na povratnim informacijama!

Hvala za povratne informacije! Zvuči da će biti od pomoći ako vas povežemo sa našim agentima Office podrške.

×