Kelewatan memuatkan imej dan JavaScript dalam SharePoint Online

Penting: Artikel ini diterjemahkan oleh mesin, lihatlah notis penafian. Sila dapatkan versi Bahasa Inggeris artikel ini di sini sebagai rujukan anda

Artikel ini memerihalkan cara anda boleh mengurangkan masa muat untuk halaman SharePoint Online menggunakan JavaScript untuk kelewatan memuatkan imej dan juga oleh menunggu untuk memuatkan-pati JavaScript sehingga selepas halaman dimuatkan.

Imej negatif boleh mempengaruhi kelajuan muat halaman pada SharePoint Online. Secara lalai, pelayar Internet yang paling moden pra mengambil imej apabila memuatkan halaman HTML. Ini boleh menyebabkan halaman menjadi sebenarnya tidak perlahan untuk memuatkan jika imej tidak kelihatan pada skrin sehingga pengguna skrol ke bawah. Imej boleh menyekat pelayar dari memuatkan bahagian halaman yang kelihatan. Untuk menyelesaikan masalah ini, anda boleh menggunakan JavaScript untuk melangkau memuatkan imej terlebih dahulu. Juga, memuatkan pati JavaScript boleh memperlahankan masa memuatkan pada halaman SharePoint anda juga. Topik ini menerangkan beberapa kaedah yang anda boleh gunakan untuk meningkatkan masa pemuatan halaman dengan JavaScript dalam SharePoint Online.

Meningkatkan masa pemuatan halaman dengan melambatkan imej memuatkan dalam halaman SharePoint Online menggunakan JavaScript

Anda boleh menggunakan JavaScript untuk menghalang pelayar web daripada pra memuat imej. Ini akan mempercepatkan keseluruhan dokumen pemaparan. Untuk melakukan ini anda mengalih keluar nilai atribut src daripada tag < img > dan menggantikannya dengan laluan ke fail dalam atribut data seperti: data-src. Contohnya:

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

Dengan kaedah ini, pelayar tidak muat turun imej dengan serta-merta. Jika imej sudah berada dalam Port pandang, JavaScript memberitahu pelayar untuk mengambil URL daripada atribut data dan menyelitkannya sebagai nilai atribut src. Imej hanya memuatkan sebagai skrol pengguna dan ia datang ke dalam pandangan.

Untuk menjadikan semua ini berlaku, anda perlu menggunakan JavaScript.

Dalam fail teks, mentakrifkan fungsi isElementInViewport()    untuk menyemak sama ada atau tidak unsur ialah dalam bahagian pelayar yang kelihatan kepada pengguna.

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

Seterusnya, gunakan isElementInViewport()    dalam fungsi loadItemsInView()    . Fungsi loadItemsInView()    akan memuatkan semua imej yang mempunyai nilai untuk atribut data-src jika mereka dalam bahagian pelayar yang kelihatan kepada pengguna. Menambah fungsi berikut ke fail teks:

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

Akhirnya, hubungi loadItemsInView()    dari dalam window.onscroll()    seperti yang ditunjukkan dalam contoh berikut. Ini memastikan bahawa sebarang imej yang berada dalam Port pandang yang dimuatkan pengguna keperluan mereka, tetapi tidak sebelum. Tambah berikut ke fail teks:

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

Untuk SharePoint Online, anda perlu melampirkan fungsi berikut peristiwa skrol pada tag #s4-ruang kerja < div >. Ini adalah kerana peristiwa tetingkap diubah untuk memastikan reben kekal dilampirkan ke atas halaman.

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

Simpan fail teks sebagai JavaScript fail dengan sambungan .js, contohnya delayLoadImages.js.

Apabila anda selesai menulis delayLoadImages.js, anda boleh menambah kandungan fail pada halaman induk dalam SharePoint Online. Anda melakukannya dengan menambah pautan skrip pengepala dalam halaman induk. Sebaik sahaja ia berada pada halaman induk, JavaScript akan digunakan pada semua halaman dalam laman SharePoint Online anda yang menggunakan tataletak halaman induk tersebut. Secara alternatif, jika anda ingin hanya gunakan ini pada satu halaman Laman anda, gunakan editor skrip bahagian Web untuk membenamkan JavaScript ke dalam halaman. Lihat topik ini untuk maklumat lanjut:

Contoh: Merujuk JavaScript delayLoadImages.js fail daripada halaman induk dalam SharePoint Online   

Dalam tertib ini berfungsi, anda juga perlu rujukan jQuery halaman induk. Dalam contoh berikut, anda boleh lihat dalam pemuatan halaman awal terdapat hanya satu imej dimuatkan tetapi terdapat beberapa lanjut pada halaman.

Petikan skrin menunjukkan satu imej dimuatkan pada halaman

Petikan skrin berikut menunjukkan baki imej yang dimuat turun selepas ia skrol ke dalam pandangan.

Petikan skrin menunjukkan beberapa imej dimuatkan pada halaman

Menunda memuatkan imej menggunakan JavaScript boleh menjadi satu teknik yang berkesan dalam meningkatkan prestasi; Walau bagaimanapun, jika teknik yang digunakan pada laman web awam kemudian enjin carian tidak dapat merangkak imej dengan cara yang sama mereka akan merangkak imej kerap dibentuk. Ini boleh menjejaskan kedudukan pada enjin carian kerana metadata pada imej itu sendiri tidak benar-benar terdapat sehingga halaman dimuatkan. Crawler enjin carian hanya Baca HTML dan oleh itu tidak akan melihat imej sebagai kandungan pada halaman. Imej adalah salah satu faktor yang digunakan untuk halaman rank dalam hasil carian. Satu cara untuk menyelesaikannya adalah menggunakan teks pengenalan untuk imej anda.

Sampel kod GitHub: menyuntik JavaScript untuk meningkatkan prestasi

Tidak ketinggalan sampel artikel dan kod pada suntikan JavaScript disediakan GitHub.

Nota: Notis Penafian Penterjemahan Mesin: Artikel ini telah diterjemah oleh sistem komputer tanpa campur tangan manusia. Microsoft menawarkan penterjemahan mesin ini untuk membantu pengguna-pengguna yang tidak bertutur dalam Bahasa Inggeris supaya dapat menikmati kandungan mengenai produk, perkhidmatan dan teknologi Microsoft. Artikel ini mungkin mengandungi ralat perbendaharaan kata, sintaks atau tatabahasa kerana ia diterjemahkan oleh mesin.

Lihat Juga

Pelayar yang disokong dalam Office 2013 dan Office 365 ProPlus

Cara untuk: menggunakan halaman induk laman dalam SharePoint 2013

Cara: mencipta tataletak halaman dalam SharePoint 2013

Kembangkan kemahiran anda
Jelajahi latihan
Dapatkan ciri baru terlebih dahulu
Sertai Office Insiders

Adakah maklumat ini membantu?

Terima kasih atas maklum balas anda!

Terima kasih atas maklum balas anda! Nampaknya ia mungkin akan membantu untuk menyambungkan anda kepada salah seorang daripada ejen sokongan Office kami.

×