Întârzierea încărcării imaginilor și JavaScript în SharePoint Online

Acest articol descrie cum puteți reduce timpul de încărcare pentru paginile SharePoint Online utilizând JavaScript pentru a amâna încărcarea imaginilor și, de asemenea, așteptând până după încărcarea paginii pentru a încărca JavaScript neesențiale.

Imaginile pot afecta negativ viteza de încărcare a paginilor pe SharePoint Online. În mod implicit, majoritatea browserelor internet moderne preiau anticipat imaginile atunci când încarcă o pagină HTML. Din acest motiv, încărcarea paginii poate deveni lentă în mod inutil dacă imaginile nu sunt vizibile pe ecran înainte ca utilizatorul să defileze în jos. Imaginile pot împiedica browserul să încarce partea vizibilă a paginii. Pentru a rezolva această problemă, puteți să utilizați JavaScript pentru a ignora încărcarea anticipată a imaginilor. De asemenea, încărcarea JavaScriptneesențiale poate încetini timpul de încărcare pentru paginile SharePoint. Acest subiect descrie unele metode pe care le puteți utiliza pentru a îmbunătăți timpii de încărcare a paginii cu JavaScript în SharePoint Online.

Îmbunătățiți timpii de încărcare a paginilor amânând încărcarea imaginilor în paginile SharePoint Online utilizând JavaScript

Puteți utiliza JavaScript pentru a împiedica un browser web să preia anticipat imagini. Acest lucru accelerează redarea generală a documentului. Pentru aceasta, eliminați valoarea atributului src din eticheta <img> și înlocuiți-l cu calea către un fișier dintr-un atribut de date, cum ar fi: data-src. De exemplu:

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

Dacă utilizați această metodă, browserul nu descarcă imaginile imediat. Dacă imaginile se află deja în poarta de vizualizare, JavaScript îi spune browserului să regăsească adresa URL din atributul de date și să o insereze ca valoare pentru atributul src. Imaginea se încarcă doar atunci când utilizatorul defilează și devine vizibilă.

Pentru a realiza aceste lucruri, trebuie să utilizați JavaScript.

Într-un fișier text, definiți funcția isElementInViewport()    pentru a verifica dacă un element se află sau nu în acea parte a browserului care este vizibilă pentru utilizator.

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

În continuare, utilizați isElementInViewport()    în funcția loadItemsInView()   . Funcția LoadItemsInView()    va încărca toate imaginile care au o valoare pentru atributul data-src dacă se află în partea browserului care este vizibilă pentru utilizator. Adăugați funcția următoare la fișierul text:

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

În cele din urmă, apelați loadItemsInView()    din window.onscroll()   , așa cum se arată în exemplul următor. Acest lucru vă asigură că toate imaginile care sunt în poarta de vizualizare sunt încărcate atunci când utilizatorul are nevoie de ele, dar nu înainte. Adăugați următoarele la fișierul text:

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

Pentru SharePoint Online, trebuie să atașați funcția următoare la evenimentul de defilare din eticheta #s4-workspace <div>. Trebuie să faceți acest lucru, deoarece evenimentele de fereastră sunt înlocuite pentru a asigura faptul că panglica rămâne atașată în partea de sus a paginii.

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

Salvați fișierul text ca fișier JavaScript cu extensia .js, de exemplu delayLoadImages.js.

După ce ați terminat de scris delayLoadImages.js, puteți să adăugați conținutul fișierului la o pagină coordonatoare în SharePoint Online. Puteți face acest lucru adăugând un script link la antetul paginii coordonatoare. După ce acesta se află într-o pagină coordonatoare, JavaScript se va aplica la toate paginile din site-ul SharePoint Online care utilizează acel aspect de pagină coordonatoare. Alternativ, dacă intenționați să îl utilizați doar pe o pagină a site-ului, utilizați partea web script editor pentru a încorpora JavaScript în pagină. Consultați aceste subiecte pentru mai multe informații:

Exemplu: Faceți referire la fișierul JavaScript delayLoadImages.js dintr-o pagină coordonatoare în SharePoint Online   

Pentru ca acesta să funcționeze, trebuie, de asemenea, să faceți referire la jQuery în pagina coordonatoare. În exemplul următor, puteți să vedeți că în încărcarea inițială a paginii apare o singură imagine, însă pagina conține mai multe.

Captură de ecran care afișează o imagine încărcată pe pagină

Următoarea captură de ecran afișează restul imaginilor care sunt descărcate după ce sunt aduse în prim-plan în urma defilării.

Captură de ecran care afișează mai multe imagini încărcate pe pagină

Amânarea încărcării imaginilor utilizând JavaScript poate fi o tehnică eficientă pentru sporirea performanței; însă, dacă tehnica este aplicată unui site web public, atunci motoarele de căutare nu vor putea să acceseze cu crawlere imaginile în același fel în care ar fi făcut-o în cazul unei imagini formate în mod obișnuit. Acest lucru poate afecta clasamentele în motoarele de căutare, deoarece metadatele din imaginea propriu-zisă nu se află acolo decât după ce se încarcă pagina. Crawlerele motoarelor de căutare citesc doar codul HTML și, prin urmare, nu veți vedea imaginile drept conținut în pagină. Imaginile reprezintă unul dintre factorii utilizați pentru a clasa paginile în rezultatele căutării. O modalitate de a rezolva această problemă este să utilizați text introductiv pentru imagini.

Exemplu de cod GitHub: Injectarea JavaScript pentru a îmbunătăți performanța

Nu pierdeți eșantioanele de articol și de cod din injectarea JavaScript furnizată pe GitHub.

Consultați și

Browsere acceptate în Office 2013 și Office 365 ProPlus

Cum să: Aplicați o pagină coordonatoare la un site în SharePoint 2013

Cum să: Creați un aspect de pagină în SharePoint 2013

Extindeți-vă competențele
Explorați instruirea
Fiți primul care obține noile caracteristici
Alăturați-vă utilizatorilor Office Insider

Au fost utile aceste informații?

Vă mulțumim pentru feedback!

Vă mulțumim pentru feedback! Se pare că ar fi util să luați legătura cu unul dintre agenții noștri de asistență Office.

×