Затримка завантаження зображень і JavaScript у SharePoint Online

У цій статті описано, як зменшити час завантаження сторінок SharePoint Online, затримуючи завантаження зображень за допомогою JavaScript, а також завантажуючи несуттєві файли JavaScript лише після завантаження сторінки.

Зображення можуть сповільняти швидкість завантаження сторінок у SharePoint Online. За замовчуванням більшість сучасних браузерів попередньо отримують віддалений доступ до зображень під час завантаження сторінки HTML. Це може призвести до невиправдано повільного завантаження сторінки, якщо зображення відображаються на екрані лише після прокручування його вмісту. Зображення можуть перешкоджати завантаженню видимої частини сторінки в браузері. Ви можете дещо вирішити цю проблему, використовуючи JavaScript, щоб пропускати попереднє завантаження зображень. Крім того, завантаження несуттєвих файлів JavaScript може сповільнити завантаження сторінок SharePoint. У цій статті описано кілька методів, які дають змогу прискорити завантаження сторінок за допомогою JavaScript у SharePoint Online.

Прискорення завантаження сторінок за рахунок затримки завантаження зображень на сторінках SharePoint Online за допомогою JavaScript

За допомогою JavaScript браузеру можна заборонити попередньо отримувати віддалений доступ до зображень. Це прискорює рендерінг усього документа. Для цього видаліть значення атрибута src з тега <img> і замініть його на шлях до файлу в атрибуті data, як-от: data-src. Наприклад:

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

Коли використовується цей метод, браузер не відразу завантажує зображення. Якщо зображення вже перебуває у вікні перегляду, JavaScript повідомляє браузеру, що потрібно отримати URL-адресу з атрибута data та вставити його як значення для атрибута 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> потрібно вкласти наведену нижче функцію. Це зумовлено тим, що події у вікні заміщуються, щоб стрічка залишалася прикріпленою до верхньої частини сторінки.

//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, на яких використовується цей макет головної сторінки. Але якщо ви плануєте використовувати його лише на одній сторінці сайту, вбудуйте JavaScript на сторінку за допомогою веб-частини редактора сценаріїв. Докладні відомості наведено в цих статтях:

Приклад: створення посилання на JavaScript-файл delayLoadImages.js із головної сторінки в SharePoint Online   

Для цього також потрібно створити посилання на jQuery на головній сторінці. Приклад нижче демонструє, що під час початкового завантаження сторінки завантажено лише одне зображення, хоча на сторінці є ще кілька зображень.

Зображення нового завдання на мережній схемі.

На знімку екрана нижче наведено інші зображення, які завантажуються лише після потрапляння у вікно перегляду під час прокручування.

Знімок екрана з кількома завантаженими зображеннями на сторінці

Затримка завантаження зображень за допомогою JavaScript дає змогу суттєво підвищити продуктивність. Однак якщо застосувати цей метод на загальнодоступному веб-сайті, засобам пошуку не вдасться переглядати зображення так само, як зображення, створені у звичний спосіб. Це може вплинути на ранжирування в засобах пошуку, адже метадані самого зображення стануть доступні лише після завантаження сторінки. Обхідники засобів пошуку зчитають лише HTML-код і не розглядатимуть зображення як вміст сторінки. Зображення – це один із факторів ранжирування сторінок у результатах пошуку. Цю проблему можна обійти, лише вказавши вступний текст для зображень.

Зразок коду GitHub: додавання JavaScript для підвищення продуктивності

Обов’язково ознайомтеся зі статтею та зразком коду в розділі, присвяченому додаванню JavaScript, на сайті GitHub.

Див. також

Браузери, які підтримуються в Office 2013 і Office 365 ProPlus

Інструкції: застосування головної сторінки до сайту в SharePoint 2013

Інструкції: створення макета сторінки в SharePoint 2013

Отримуйте нові функції раніше за інших
Приєднайтеся до оцінювачів Office

Ця інформація корисна?

Дякуємо за ваш відгук!

Дякуємо за відгук! Схоже, вам може стати в нагоді допомога одного з наших спеціалістів служби підтримки Office, з яким ми вас можемо з’єднати.

×