การหน่วงเวลาในการโหลดรูปภาพและ JavaScript ใน SharePoint Online

บทความนี้อธิบายวิธีการที่คุณสามารถลดระยะเวลาการโหลดสำหรับหน้า SharePoint Online โดยใช้ JavaScript เพื่อหน่วงเวลาการโหลดรูปภาพและรอการโหลด JavaScript ที่ไม่จำเป็นจนกว่าหลังจากการโหลดหน้า

รูปภาพอาจส่งผลลบต่อความเร็วในการโหลดหน้าบน SharePoint Online ตามค่าเริ่มต้น เบราว์เซอร์อินเทอร์เน็ตที่ทันสมัยจะดึกข้อมูลรูปภาพล่วงหน้าเมื่อโหลดหน้า HTML ซึ่งอาจทำให้โหลดหน้าช้าโดยไม่จำเป็น ถ้ามองไม่เห็นรูปภาพบนหน้าจอจนกว่าผู้ใช้จะเลื่อนลง รูปภาพสามารถบล็อกเบราว์เซอร์จากการโหลดส่วนที่มองเห็นได้ของหน้า เมื่อต้องการแก้ปัญหานี้ คุณสามารถใช้ JavaScript เพื่อข้ามการโหลดรูปภาพได้ นอกจากนี้ การโหลด JavaScript ที่ไม่จำเป็นอาจทำให้เวลาในการโหลดหน้า SharePoint ของคุณช้าลงเช่นกัน หัวข้อนี้อธิบายวิธีการบางอย่างที่คุณสามารถใช้เพื่อปรับปรุงระยะเวลาในการโหลดด้วย JavaScript ใน SharePoint Online

ปรับปรุงระยะเวลาในการโหลดหน้าโดยการหน่วงเวลาการโหลดรูปภาพในหน้า SharePoint Online โดยใช้ JavaScript

คุณสามารถใช้ JavaScript เพื่อป้องกันไม่ให้เว็บเบราว์เซอร์ดึกข้อมูลรูปภาพล่วงหน้า ซึ่งจะเร่งความเร็วในการแสดงเอกสารโดยรวม เมื่อต้องการทำเช่นนี้ คุณจะต้องนำค่าของแอตทริบิวต์ src ออกจากแท็ก <img> และแทนที่ด้วยเส้นทางไปยังไฟล์ในแอตทริบิวต์ข้อมูล เช่น data-src ตัวอย่างเช่น:

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

ด้วยการใช้วิธีนี้ เบราว์เซอร์จะไม่ดาวน์โหลดรูปภาพทันที ถ้ารูปภาพอยู่ในมุมมองอยู่แล้ว JavaScript จะบอกให้เบราว์เซอร์รับ URL จากแอตทริบิวต์ข้อมูลและแทรกเป็นค่าสำหรับแอตทริบิวต์ src รูปภาพจะโหลดเมื่อผู้ใช้เลื่อนดูและอยู่ในมุมมองเท่านั้น

เมื่อต้องการดำเนินการทั้งหมดนี้ คุณจะต้องใช้ JavaScript

ในไฟล์ข้อความ ให้กำหนดฟังก์ชัน isElementInViewport()    เพื่อตรวจสอบว่าองค์ประกอบอยู่ในส่วนของเบราว์เซอร์ที่ผู้ใช้มองเห็นได้หรือไม่

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

จากนั้น ให้ใช้ isElementInViewport()    ในฟังก์ชัน loadItemsInView()    ฟังก์ชัน loadItemsInView()    จะโหลดรูปภาพทั้งหมดที่มีค่าสำหรับแอตทริบิวต์ data-src ถ้าอยู่ในส่วนของเบราว์เซอร์ที่ผู้ใช้มองเห็นได้ เพิ่มฟังก์ชันต่อไปนี้ลงในไฟล์ข้อความ:

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

สุดท้าย ให้เรียกใช้ loadItemsInView()    จากภายใน window.onscroll()    ตามที่แสดงในตัวอย่างต่อไปนี้ ซึ่งรับรองว่ารูปภาพที่อยู่ในมุมมองจะโหลดเมื่อผู้ใช้ต้องการ แต่จะไม่โหลดก่อน เพิ่มรายการต่อไปนี้ลงในไฟล์ข้อความ:

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

สำหรับ SharePoint Online คุณจะต้องแนบฟังก์ชันต่อไปนี้เพื่อเลือนกิจกรรมบนแท็ก #s4-workspace <div> ทั้งนี้ เนื่องจากกิจกรรมหน้าต่างถูกแทนที่เพื่อรับรองว่า Ribbon จะยังคงแนบอยู่กับทางด้านบนของหน้า

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

บันทึกไฟล์ข้อมูลเป็นไฟล์ JavaScript ที่มีนามสกุล .js ตัวอย่างเช่น delayLoadImages.js

เมื่อคุณเขียน delayLoadImages.js เสร็จแล้ว คุณสามารถเพิ่มเนื้อหาของไฟล์ลงในหน้าต้นแบบใน SharePoint Online คุณทำสิ่งนี้โดยการเพิ่มลิงก์สคริปต์ไปยังส่วนหัวในหน้าต้นแบบ เมื่ออยู่ในหน้าต้นแบบ JavaScript จะถูกนำไปใช้กับทุกหน้าในไซต์ SharePoint Online ของคุณที่ใช้เค้าโครงหน้าต้นแบบ หรือ ถ้าคุณต้องการใช้บนหน้าเดียวบนไซต์ของคุณเท่านั้น ให้ใช้ Script Editor Web Part เพื่อฝัง JavaScript ลงในหน้า ดูหัวข้อเหล่านี้สำหรับข้อมูลเพิ่มเติม:

ตัวอย่าง: อ้างอิงไฟล์ delayLoadImages.js ของ JavaScript จากหน้าต้นแบบใน SharePoint Online   

เพื่อให้ทำงานได้ คุณยังต้องอ้างอิง jQuery ในหน้าต้นแบบ ในตัวอย่างต่อไปนี้ คุณจะเห็นว่าในการโหลดหน้าเริ่มต้น โหลดเพียงรูปภาพเดียว แต่ยังมีรูปภาพอื่นๆ บนหน้า

สกรีนช็อตแสดงรูปภาพ 1 รูปถูกโหลดบนหน้า

สกรีนช็อตต่อไปนี้แสดงส่วนที่เหลือของรูปภาพที่ดาวน์โหลดหลังจากถูกเลื่อนเข้ามาในมุมมอง

สกรีนช็อตแสดงรูปภาพหลายรูปถูกโหลดบนหน้า

การหน่วงเวลาการโหลดรูปภาพโดยใช้ JavaScript อาจเป็นเทคนิคที่ดีในการเพิ่มประสิทธิภาพ อย่างไรก็ตาม ถ้าเทคนิคถูกนำไปใช้บนเว็บไซต์สาธารณะ แล้วโปรแกรมค้นหาไม่สามารถเลื่อนรูปภาพด้วยวิธีเดียวกับที่เลื่อนรูปภาพตามปกติ ซึ่งอาจส่งผลกับการจัดอันดับบนโปรแกรมค้นหา เนื่องจากเมตาดาต้าบนรูปภาพไม่ได้อยู่ที่นั่นจริงจนกว่าจะโหลดหน้าเสร็จสมบูรณ์ โปรแกรมค้นหาจะอ่านเฉพาะ HTML และจะมองไม่เห็นรูปภาพเป็นเนื้อหาบนหน้า รูปภาพเป็นหนึ่งในปัจจัยที่ใช้ในการจัดอันดับหน้าในผลลัพธ์การค้นหา วิธีเดียวในการแก้ไขปัญหาชั่วคราวคือใช้ข้อความแนะนำสำหรับรูปภาพของคุณ

ตัวอย่างโค้ด GitHub: ใช้ JavaScript เพื่อปรับปรุงประสิทธิภาพ

อย่าพลาดบทความและตัวอย่างรหัสบน การใส่ JavaScript ที่อยู่บน GitHub

ดูเพิ่มเติม

เบราว์เซอร์ที่สนับสนุนใน Office 2013 และ Office 365 ProPlus

วิธีการ: นำหน้าต้นแบบไปใช้กับไซต์ใน SharePoint 2013

วิธีการ: สร้างเค้าโครงหน้ากระดาษใน SharePoint 2013

ขยายทักษะของคุณ
สำรวจการฝึกอบรม
รับฟีเจอร์ใหม่ก่อนใคร
เข้าร่วม Office Insider

ข้อมูลนี้เป็นประโยชน์หรือไม่

ขอบคุณสำหรับคำติชมของคุณ!

ขอขอบคุณสำหรับคำติชมของคุณ! เราคิดว่าอาจเป็นประโยชน์ที่จะให้คุณได้ติดต่อกับหนึ่งในตัวแทนฝ่ายสนับสนุน Office ของเรา

×