Vaizdų įkėlimo delsa ir „JavaScript“ programoje „SharePoint Online“

Šiame straipsnyje aprašoma, kaip galite sumažinti „SharePoint Online“ puslapių įkėlimo laiką naudodami „JavaScript“, kad vaizdai ir kita nebūtinas „JavaScript“ būtų įkeltas vėliau.

Vaizdai gali sulėtinti „SharePoint Online“ puslapių įkėlimo spartą. Pagal numatytuosius nustatymus dauguma šiuolaikinių interneto naršyklių iš anksto atsiunčia vaizdus įkeldamos HTML puslapį. Dėl to puslapis gali būti įkeliamas neįprastai lėtai, jei vaizdų nesimato ekrane, kol vartotojas nepaslenka žemyn. Vaizdai gali kliudyti naršyklei įkelti matomą puslapio dalį. Norėdami išspręsti šią problemą, galite naudoti „JavaScript“, kad vaizdai būtų įkeliami vėliau. Be to, „SharePoint“ puslapiai gali būti įkeliami lėčiau dėl nebūtinų „JavaScript“. Šioje temoje aprašomi keli būdai, paspartinti puslapių įkėlimo spartą naudojant „JavaScript“ programoje „SharePoint Online“.

Spartesnis puslapių įkėlimas programoje „SharePoint Online“ atidedant vaizdų įkėlimą naudojant „JavaScript“

Naudodami „JavaScript“ galite neleisti žiniatinklio naršyklei iš anksto įkelti puslapius. Taip paspartinamas bendras dokumento generavimas. Norėdami tai atlikti pašalinkite src atributo reikšmę žymėje <img> ir ją pakeiskite keliu į duomenų atributo failą, pvz., data-src. Pavyzdžiui:

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

Naudojant šį metodą, naršyklė neatsisiunčia vaizdų iš karto. Jei vaizdas jau yra peržiūros srityje, „JavaScript“ praneša naršyklei nuskaityti duomenų atributo URL ir įterpti jį kaip src atributo reikšmę. Vaizdas įkeliamas tik kai vartotojas slenka žemyn ir jis patenka į ekraną.

Šiuo tikslu turėsite naudoti „JavaScript“.

Tekstiniame faile, apibrėžkite funkciją isElementInViewport()   , kad patikrintumėte, ar elementas yra vartotojo regimoje naršyklės ekrano dalyje.

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

Tada panaudokite isElementInViewport()    funkcijoje loadItemsInView()   . Funkcija loadItemsInView()    įkels visus vaizdus, turinčius data-src atributo reikšmes, jei jie patenka į vartotojui regimą naršyklės ekrano dalį. Įtraukite į tekstinį failą šią funkciją:

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

Galiausiai iškvieskite loadItemsInView()    funkcijoje window.onscroll()    kaip parodyta tolesniame pavyzdyje. Tai užtikrina, kad peržiūros srityje esantys vaizdai būtų įkelti tik jų prireikus, o ne iš anksto. Įtraukite į tekstinį failą šią funkciją:

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

„SharePoint Online“ žymės #s4-workspace <div> slinkimo įvykiui būtina priskirti šią funkciją. Taip būtina tam, kad lango įvykiai blokuojami, kad juostelės elementai liktų puslapio viršuje.

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

Įrašykite teksto failą kaip „JavaScript“ failą su plėtiniu .js, pvz., delayLoadImages.js.

Įrašę delayLoadImages.js, galite įtraukti failo turinį į „SharePoint Online“ puslapio šabloną. Tai atlikite įtraukdami scenarijaus saitą į puslapio šablono antraštę. Įtraukus scenarijų į puslapio šabloną „JavaScript“ bus pritaikytas visiems „SharePoint Online“ svetainės puslapiams, kuriuose naudojamas puslapio šablono maketas. Jei šią funkciją ketinate naudoti tik viename svetainės puslapyje, įterpkite „JavaScript“ į puslapį naudodami puslapio dalies scenarijų rengyklę. Peržiūrėkite šias temas, jei reikia daugiau informacijos:

Pavyzdys: „JavaScript“ delayLoadImages.js failo nurodymas „SharePoint Online   “ puslapio šablone

Kad tai veiktų, turite nurodyti „jQuery“ puslapio šablone. Toliau pateiktame pavyzdyje, matote, kad įkeliant pradinį puslapį įkeliamas tik vienas vaizdas, nors puslapyje jų yra daugiau.

Ekrano kopija, kurioje rodomas vienas puslapyje įkeltas vaizdas

Kitoje ekrano kopijoje rodomi likę vaizdai, kurie atsiunčiami patekę į regimą ekrano dalį.

Ekrano kopija, kurioje rodomi keli puslapyje įkelti vaizdai

Vaizdų įkėlimo atidėjimas naudojant „JavaScript“ gali būti veiksminga priemonė našumui padidinti; tačiau, jei ši priemonė taikoma viešai svetainei, paieškos tarnybos negali aptikti vaizdų, kaip įprastai generuojamų vaizdų atveju. Tai gali pakenkti svetainės reitingui paieškos tarnybose, nes vaizdo metaduomenys nepasirodo, kol neįkeliamas puslapis. Ieškos tarnybų tinklapių aptikimo robotas gali nuskaityti tik HTML kodą, todėl puslapyje jis neaptiks vaizdų kaip puslapio turinio. Vaizdai yra vienas iš veiksnių reitinguojant puslapius ieškos tarnybose. Vienas iš šios problemos sprendimo būdų – naudoti įžanginį vaizdų tekstą.

„GitHub“ kodo pavyzdys: „JavaScript“ įdėjimas našumui pagerinti

Nepraleiskite straipsnio ir kodo pavyzdžio apie „JavaScript“ įdėjimą, pateiktą „GitHub“.

Taip pat žr.

„Office 2013“ ir „Office 365 ProPlus“ palaikomos naršyklės

Kaip: „SharePoint 2013“ svetainės puslapio šablono taikymas

Kaip: Puslapio maketo kūrimas „SharePoint 2013“

Tobulinkite savo įgūdžius
Ieškoti mokymo
Pirmiausia gaukite naujų funkcijų
Prisijunkite prie „Office Insider“ dalyvių

Ar ši informacija buvo naudinga?

Dėkojame už jūsų atsiliepimus!

Dėkojame už jūsų atsiliepimą! Panašu, kad gali būti naudinga jus sujungti su vienu iš mūsų „Office“ palaikymo agentų.

×