Attēlu ielādes un JavaScript aizkavēšana pakalpojumā SharePoint Online

Šajā rakstā ir aprakstīts, kā varat samazināt ielādes laiku SharePoint Online lapām, izmantojot JavaScript, lai aizkavētu attēlu ielādi, kā arī gaidot mazāk būtisku JavaScript ielādi, līdz lapa tiek ielādēta.

Attēli var negatīvi ietekmēt lapu ielādes ātrumu SharePoint Online. Pēc noklusējuma lielākajā daļā mūsdienu interneta pārlūkprogrammu, ielādējot HTML lapu, iepriekš ienes attēlus. Tas var izraisīt to, ka lapas ielāde ir nevajadzīgi lēna, ja attēli nav redzami ekrānā, līdz lietotājs ritina uz leju. Attēlus var bloķēt pārlūkprogrammā lapas redzamās daļas ielādi. Lai novērstu šo problēmu, varat izmantot JavaScript, lai izlaistu attēlu ielādi vispirms. Turklāt nebūtiska JavaScript ielāde var palēnināt ielādes laiku arī jūsu SharePoint lapās. Šajā tēmā ir aprakstītas dažas metodes, ko varat izmantot, lai uzlabotu lapu ielādes laiku ar JavaScriptSharePoint Online.

Lapu ielādes laika uzlabošana, aizkavējot attēlu ielādi SharePoint Online lapās, izmantojot JavaScript

Varat izmantot JavaScript, lai neļautu tīmekļa pārlūkprogrammai sākotnēji ienest attēlus. Tas paātrina vispārējo dokumentu atveidi. Lai to izdarītu, noņemiet src atribūta vērtību no <img> taga un aizstājiet to ar ceļu uz failu datu atribūtā, piemēram: data-src. Piemērs.

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

Izmantojot šo metodi, pārlūkprogramma nelejupielādē attēlus nekavējoties. Ja attēls jau ir skatvietā, JavaScript norāda pārlūkprogrammai izgūt URL no datu atribūta un ievietot to kā src atribūta vērtību. Attēls tiek ielādēts tikai tad, kad lietotājs ritina un tas nonāk skatvietā.

Lai tas viss notiktu, ir jāizmanto JavaScript.

Teksta failā definējiet funkciju isElementInViewport()   , lai pārbaudītu, vai elements ir pārlūkprogrammas daļā, kas ir redzama lietotājam.

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

Pēc tam izmantojiet isElementInViewport()    funkcijā loadItemsInView()   . Funkcija loadItemsInView()    ielādēs visus attēlus, kam ir vērtība atribūtam data-src, ja tie ir pārlūkprogrammas daļā, kas ir redzama lietotājam. Pievienojiet teksta failam šādu 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"));
          }
      }
  });
}

Visbeidzot izsauciet loadItemsInView()    no window.onscroll()   , kā parādīts tālākajā piemērā. Tas nodrošina, ka attēli, kas atrodas skatvietā, tiek ielādēti, kad lietotājam tie ir nepieciešami, nevis pirms tam. Pievienojiet teksta failam šādu vērtību:

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

SharePoint Online jums ir jāpievieno tālāk norādītā funkcija ritināšanas notikumam #s4-workspace <div> tagā. Tas ir tāpēc, ka loga notikumi tiek ignorēti, lai nodrošinātu, ka lente paliek pievienota lapas augšpusē.

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

Saglabājiet teksta failu kā JavaScript failu ar paplašinājumu .js, piemēram, delayLoadImages.js.

Kad esat pabeidzis rakstīt delayLoadImages.js., faila saturu varat pievienot lappušu šablonam SharePoint Online. To var izdarīt, pievienojot skripta saiti uz lappušu šablona galveni. Kad tā būs lappušu šablonā, JavaScript tiks lietots visām lapām jūsu SharePoint Online vietnē, kas izmanto lappušu šablona izkārtojumu. Vai arī, ja vēlaties to izmantot tikai vienā savas vietnes lapā, izmantojiet skriptu redaktora tīmekļa daļu, lai iegultu JavaScript lapā. Papildinformāciju skatiet šajās tēmās:

Piemērs: atsauču veidošana uz JavaScript delayLoadImages.js failu no lappušu šablona SharePoint Online   

Lai tas darbotos, ir jāizveido arī atsauce uz jQuery lappušu šablonā. Šajā piemērā sākotnējā lapas ielādē redzams, ka tiek ielādēts tikai viens attēls, bet lapā ir vairāki citi.

Ekrānuzņēmums, kurā redzams viens lapā ielādēts attēls

Tālāk esošajā ekrānuzņēmumā parādīti pārējie attēli, kas tiek lejupielādēti pēc tam, kad tiek ieritināti skatā.

Ekrānuzņēmums, kurā redzami vairāki lapā ielādēti attēli

Attēlu ielādes atlikšana, izmantojot JavaScript, var būt efektīva metode, lai palielinātu veiktspēju, tomēr, ja metode tiek lietota publiskā tīmekļa vietnē, meklētājprogrammas nevar pārmeklēt attēlus tāpat kā pārmeklētu parasti veidotus attēlu. Tas var ietekmēt rangu meklētājprogrammās, jo metadatu pašā attēlā īsti tur nav, līdz lapas tiek ielādēta. Meklētājprogrammu rāpuļprogrammas lasa tikai HTML un tāpēc neredzēs attēlus kā lapas saturu. Attēli ir viens no faktoriem, kas tiek izmantoti, lai kārtotu lapas meklēšanas rezultātos. Viens veids, kā to apiet, ir attēliem izmantot ievada tekstu.

GitHub koda piemērs: JavaScript ieviešana, lai uzlabotu veiktspēju

Nepalaidiet garām rakstu un koda piemēru par JavaScript ieviešanu, kas pieejami pakalpojumā GitHub.

Skatiet arī

Atbalstītās pārlūkprogrammas sistēmā Office 2013 un Office 365 ProPlus

Padoms: lappušu šablona lietošana vietnei programmatūrā SharePoint 2013

Padoms: lappušu šablona izveide programmatūrā SharePoint 2013

Paplašiniet savas prasmes
Iepazīties ar apmācību
Esiet pirmais, kas saņem jaunās iespējas
Pievienoties Office Insider programmai

Vai šī informācija bija noderīga?

Paldies par jūsu atsauksmēm!

Paldies par atsauksmēm! Šķiet, ka varētu būt noderīgi sazināties ar kādu no mūsu Office atbalsta aģentiem.

×