Trì hoãn tải ảnh và JavaScript trong SharePoint Online

Bài viết này mô tả cách giảm thời gian tải các trang SharePoint Online bằng cách sử dụng JavaScript để trì hoãn tải ảnh và đồng thời bằng cách chờ đến khi trang tải xong mới tải JavaScript không cần thiết.

Hình ảnh có thể ảnh hưởng đến tốc độ tải trang trên SharePoint Online. Theo mặc định, hầu hết các trình duyệt Internet hiện đại sẽ tải trước hình ảnh khi tải trang HTML. Điều này có thể gây tải trang chậm một cách không cần thiết nếu không nhìn thấy ảnh trên màn hình cho đến khi người dùng cuộn xuống. Ảnh có thể chặn trình duyệt tải phần nhìn thấy được của trang. Để khắc phục vấn đề này, bạn có thể dùng JavaScript để bỏ qua tải ảnh đầu tiên. Đồng thời, tải JavaScript không cần thiết cũng có thể làm chậm thời gian tải trên các trang SharePoint của bạn. Chủ đề này mô tả một số phương pháp bạn có thể sử dụng để cải thiện thời gian tải trang với JavaScript trong SharePoint Online.

Cải thiện thời gian tải trang bằng cách trì hoãn tải ảnh trong các trang SharePoint Online bằng JavaScript

Bạn có thể dùng JavaScript để ngăn trình duyệt web tải ảnh trước. Điều này giúp đẩy nhanh tốc độ kết xuất tài liệu nói chung. Để thực hiện được điều này, bạn hãy loại bỏ giá trị của thuộc tính src từ thẻ <img> và thay thế bằng đường dẫn đến một tệp trong một thuộc tính dữ liệu chẳng hạn như: data-src. Ví dụ:

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

Bằng cách dùng phương pháp này, trình duyệt không tải ảnh xuống ngay lập tức. Nếu hình ảnh đã ở trong cổng xem, JavaScript ra lệnh cho trình duyệt truy xuất URL từ thuộc tính dữ liệu và chèn làm giá trị cho thuộc tính src. Hình ảnh sẽ chỉ tải khi người dùng cuộn đến ảnh.

Để thực hiện được tất cả điều này, bạn sẽ cần dùng JavaScript.

Trong một tệp văn bản, xác định hàm isElementInViewport()    để kiểm tra xem một thành phần có nằm trong phần trình duyệt mà người dùng nhìn thấy hay không.

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

Tiếp theo, sử dụng isElementInViewport()    trong hàm loadItemsInView()   . Hàm loadItemsInView()    sẽ tải tất cả các hình ảnh có giá trị cho thuộc tính data-src nếu chúng nằm trong phần trình duyệt mà người dùng nhìn thấy. Thêm hàm sau đây vào tệp văn bản:

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

Cuối cùng, gọi loadItemsInView()    từ trong window.onscroll()    như minh họa trong ví dụ sau đây. Điều này đảm bảo rằng mọi hình ảnh trong cổng xem sẽ được tải khi người dùng cần đến chứ không tải trước. Thêm nội dung sau đây vào tệp văn bản:

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

Đối với SharePoint Online, bạn cần đính kèm hàm sau đây vào sự kiện cuộn trên thẻ #s4-workspace<div>. Đây là vì các sự kiện trong cửa sổ sẽ bị ghi đè để đảm bảo dải băng vẫn được gắn trên đầu trang.

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

Lưu tệp văn bản dưới dạng một tệp JavaScript có phần mở rộng .js, ví dụ: delayLoadImages.js.

Sau khi đã ghi xong delayLoadImages.js, bạn có thể thêm nội dung tệp vào một trang cái trong SharePoint Online. Bạn thực hiện điều này bằng cách thêm một liên kết tập lệnh vào đầu trang trong trang cái. Khi liên kết tập lệnh ở trong trang cái, JavaScript sẽ được áp dụng cho tất cả các trang trong site SharePoint Online có sử dụng bố trí trang cái đó. Ngoài ra, nếu bạn chỉ muốn áp dụng trên một trang của site, hãy sử dụng Phần Web của trình soạn thảo tập lệnh để nhúng JavaScript vào trang. Hãy xem các chủ đề này để biết thêm thông tin:

Ví dụ: Tham chiếu tệp JavaScript delayLoadImages.js từ một trang cái trong SharePoint Online   

Để có tác dụng, bạn cũng cần phải tham chiếu jQuery trong trang cái. Trong ví dụ sau đây, bạn có thể thấy khi tải trang ban đầu chỉ có một ảnh được tải nhưng còn một số ảnh nữa trên trang.

Ảnh chụp màn hình cho thấy một ảnh đã được tải lên trên trang

Ảnh chụp màn hình sau đây cho thấy phần ảnh còn lại được tải xuống sau khi người dùng cuộn tới.

Ảnh chụp màn hình cho thấy một vài ảnh đã tải lên trên trang

Trì hoãn tải ảnh bằng cách sử dụng JavaScript có thể là một kỹ thuật hiệu quả để tăng hiệu suất; tuy nhiên, nếu kỹ thuật này được áp dụng trên website công cộng thì công cụ tìm kiếm sẽ không thể tìm kéo các hình ảnh giống như cách tìm kéo hình ảnh được định dạng theo cách thông thường. Điều này có thể ảnh hưởng đến thứ hạng trên công cụ tìm kiếm vì siêu dữ liệu trên ảnh không thực sự xuất hiện cho đến khi tải trang. Trình tìm kéo của công cụ tìm kiếm chỉ đọc HTML và do đó sẽ không thấy được các ảnh nội dung trên trang. Hình ảnh là một trong những yếu tố được sử dụng để xếp thứ hạng trang trong kết quả tìm kiếm. Một cách để khắc phục điều này là sử dụng văn bản giới thiệu cho ảnh của bạn.

Mẫu mã GitHub: Nạp JavaScript để cải thiện hiệu suất

Đừng bỏ lỡ bài viết này và mẫu cho mã về Nạp JavaScript được cung cấp trên GitHub.

Xem Thêm

Các trình duyệt được hỗ trợ trong Office 2013 và Office 365 ProPlus

Cách thức: Áp dụng trang cái cho site trong SharePoint 2013

Cách thức: Tạo một bố trí trang trong SharePoint 2013

Phát triển kỹ năng Office của bạn
Khám phá nội dung đào tạo
Sở hữu tính năng mới đầu tiên
Tham gia Người dùng nội bộ Office

Thông tin này có hữu ích không?

Cảm ơn phản hồi của bạn!

Cảm ơn bạn đã phản hồi! Để trợ giúp tốt hơn, có lẽ chúng tôi sẽ kết nối bạn với một trong những nhân viên hỗ trợ Office của chúng tôi.

×