Задержка загрузки изображений и JavaScript в SharePoint

  • Статья

В этой статье описывается, как уменьшить время загрузки страниц SharePoint, используя JavaScript для задержки загрузки изображений, а также ожидая загрузки javaScript до тех пор, пока страница не загрузит.

Изображения могут отрицательно повлиять на скорость загрузки страницы в SharePoint. По умолчанию большинство современных интернет-браузеров предварительно извлекает изображения при загрузке HTML-страницы. Этот процесс может привести к медленной загрузке страницы, если изображения не видны на экране, пока пользователь не прокрутит вниз. Изображения могут блокировать загрузку видимой части страницы в браузере. Чтобы обойти эту проблему, можно использовать JavaScript, чтобы сначала пропустить загрузку образов. Кроме того, загрузка nonessential JavaScript также может замедлить загрузку на страницах SharePoint. В этой статье описываются некоторые методы, которые можно использовать для улучшения времени загрузки страниц с помощью JavaScript в SharePoint.

Увеличение времени загрузки страницы за счет задержки загрузки изображений на страницах SharePoint с помощью JavaScript

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

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

В этом методе браузер не скачивает изображения сразу. Если изображение уже находится в окне просмотра, JavaScript сообщает браузеру, чтобы получить URL-адрес из атрибута данных и вставить его в качестве значения для атрибута src. Изображение загружается только по мере прокрутки пользователем и появляется в поле зрения.

Для выполнения этой функции необходимо использовать JavaScript.

В текстовом файле определите функцию isElementInViewport(), чтобы проверка, находится ли элемент в той части браузера, которая видна пользователю.

function isElementInViewport(el) {
  if (!el)
    return false;
  var rect = el.getBoundingClientRect();
  return (
    rect.top >= 0 &amp;&amp;
    rect.left >= 0 &amp;&amp;
    rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) &amp;&amp;
    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 необходимо присоединить следующую функцию к событию прокрутки тега div> #s4-workspace<, так как события окна переопределены, чтобы лента оставалась прикрепленной к верхней части страницы.

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

Сохраните текстовый файл как файл JavaScript с расширением .js, например delayLoadImages.js.

Завершив написание delayLoadImages.js, вы можете добавить содержимое файла на страницу master в SharePoint, добавив ссылку скрипта в заголовок на странице master. После того как он находится на странице master, JavaScript применяется ко всем страницам сайта SharePoint, которые используют этот master макет страницы. Кроме того, если вы планируете использовать функции только на одной странице сайта, используйте веб-часть редактора скриптов, чтобы внедрить JavaScript на страницу. Дополнительные сведения см. в разделе:

Пример. Ссылка на файл delayLoadImages.js JavaScript со страницы master в SharePoint

Чтобы этот пример работал, необходимо также ссылаться на jQuery на странице master. В следующем примере в начальной загрузке страницы видно, что загружено только одно изображение, но на странице есть еще несколько.

Снимок экрана: одно изображение, загруженное на страницу.

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

Снимок экрана: несколько изображений, загруженных на страницу.

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

Пример кода GitHub: внедрение JavaScript для повышения производительности

Не пропустите статью и пример кода по внедрению JavaScript , предоставленные на GitHub.

См. также

Поддерживаемые браузеры в Office 2013 и Приложения Microsoft 365 для предприятий

Инструкции. Применение эталонной страницы к сайту в SharePoint 2013

Инструкции. Создание макета страницы в SharePoint 2013