JavaScript ja piltide laadimisega viivitamine SharePoint Online’is

Selles artiklis kirjeldatakse, kuidas lühendada SharePoint Online’i lehtede laadimisaega JavaScripti abil, viivitades piltide laadimisega ja väheolulise JavaScripti laadimisega, kuni leht on laadinud.

Pildid võivad SharePoint Online’is lehe laadimiskiirusele halvasti mõjuda. Vaikimisi on enamikus tänapäeva veebibrauserites HTML-lehe laadimisel pildid juba eelnevalt toodud. Seetõttu võib leht otstarbetult kaua laadida, kui pilte enne allapoole kerimist ei kuvata. Pildid võivad takistada brauseril lehe nähtavat osa laadimast. Selle probleemi lahendamiseks võite lasta JavaScriptil piltide esmane laadimine vahele jätta. Samuti võib väheoluline JavaScript lühendada teie SharePointi lehtede laadimisaega. Selles teemas kirjeldatakse mõnda meetodit, mis võimaldavad JavaScripti abil lehtede laadimisaega SharePoint Online’is lühendada.

Laadimisaja lühendamine JavaScripti abil SharePoint Online’is piltide laadimisega viivitades

Saate lasta JavaScriptil takistada veebibrauseri piltide eeltoomist. See kiirendab üldist dokumentide renderdamist. Selleks tuleb eemaldada sildilt <img> src-atribuut ja asendada see andmeatribuudi faili teega (nt data-src). Siin on mõned näited.

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

Selle meetodi puhul ei laadi brauser pilte kohe alla. Kui pilt on juba vaateavas, käsib JavaScript brauseril tuua andmeatribuudi URL ja sisestada see src-atribuudi väärtusena. Pilt laaditakse ainult siis, kui kasutaja kerib selle juurde ja see jääb kuvasse.

Selle kõige jaoks tuleb kasutada JavaScripti.

Määratlege tekstifailis funktsioon isElementInViewport()   , et kontrollida, kas element jääb brauseri ossa, mis on kasutajale nähtav.

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

Järgmiseks kasutage funktsioonis loadItemsInView()    lõiku isElementInViewport()   . Funktsioon loadItemsInView()    laadib kõik atribuudi data-src väärtusega pildid, kui need on kasutajale nähtavas brauseri osas. Lisage tekstifaili järgmine funktsioon:

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

Lõpuks kutsuge funktsioonist window.onscroll()    lõik loadItemsInView()   , nagu on näidatud järgmises näites. Niimoodi saab veenduda, et iga vaateavas olev pilt laaditakse siis, kui kasutaja neid vajab, mitte varem. Lisage järgnev lõik tekstifaili:

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

SharePoint Online’i jaoks tuleb lisada kerimissündmuse kohta järgmine funktsioon #s4-tööruumi sildile <div>. Selle põhjuseks on aknasündmuste tühistamine selleks, et lint jääks kindlasti lehe ülaosa külge.

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

Salvestage tekst JavaScripti failina (laiendiga .js), nt delayLoadImages.js.

Kui faili delayLoadImages.js kirjutamine on valmis, saate lisada faili sisu SharePoint Online’i juhtlehele. Seda saate teha skriptilingi lisamisega juhtlehe päisesse. Kui see on juhtlehele lisatud, rakendatakse JavaScript teie SharePoint Online’i saidi kõigile lehtedele, mis kasutavad juhtlehe paigutust. Teisel juhul, kui plaanite kasutada sellist sätet ainult ühel saidi lehel, saate skriptiredaktiori veebiosa abil lehte JavaScripti manustada. Lisateavet leiate järgmistest teemadest.

Näide: JavaScripti faili delayLoadImages.js viitamine SharePoint Online’i juhtlehelt   

Selle toimimiseks tuleb viidata juhtlehel ka teegile jQuery. Järgmises näites on lehe laadimisel kõigepealt näha, et laaditud on ainult üks pilt, aga lehel on neid veel mitu.

Kuvatõmmis, kus on näha üks lehele laaditud pilt

Järgmisel kuvatõmmisel on näidatud ülejäänud pildid, mis laaditakse alla siis, kui need kerimisel kuvasse jõuavad.

Kuvatõmmis, kus on näha mitu lehele laaditud pilti

Pildi laadimisega viivitamine JavaScripti abil võib olla tõhus jõudluse suurendamise viis; siiski, kui seda kasutada avalikul veebilehel, ei suuda otsimoorid pilte analüüsida sel viisil, nagu seda tehtaks tavapäraselt moodustatud pildiga. See võib mõjutada otsimootorite otsingujärke, kuna pildi enda metaandmed ei jõua kohale enne, kui lehekülg on lõpuni laadinud. Otsimootorite ämblikud loevad ainult HTML-i ja seetõttu ei näe pilte lehel oleva sisuna. Pildid on üks otsingutulemite järjestamist mõjutavatest teguritest. Üks viis selle probleemi lahendamiseks on piltidele tutvustava teksti lisamine.

GitHub-koodi näide: JavaScripti lisamine parema jõudluse otstarbel

Vaadake kindlasti artiklit ja koodinäidet JavaScript lisamise kohta GitHubis.

Vt ka

Office 2013 ja Office 365 ProPlusi toetatud brauserid

Õpetus: rakenduses SharePoint 2013 juhtlehe rakendamine

Õpetus: lehepaigutuse loomine rakenduses SharePoint 2013

Täiendage oma oskusi
Tutvuge koolitusmaterjalidega
Kasutage uusi funktsioone enne teisi
Liituge Office Insideri programmiga

Kas sellest teabest oli abi?

Täname tagasiside eest!

Täname tagasiside eest! Tundub, et võiksime teid kokku viia ühega meie Office'i tugiagentidest, kes aitab teil probleemi lahendada.

×