Проблема с предварительной загрузкой изображений в зависимости от устройства

NZT48 · 01.10.2023

Привет всем,
Я пытаюсь предзагрузить постер фильма <%- movie.poster_big %> (для ПК) и <%- movie.poster %> (на мобильном) (для Largest Contentful Paint) на странице movie.ejs из динамического источника, созданного на сервере. Вот упрощенный код, который я использую:

HTML:

<!DOCTYPE html>
<html>
<head>
  <!-- Предзагрузить постер фильма для ПК -->
  <link rel="preload" href="<%- movie.poster_big %>" as="image">

  <!-- Предзагрузить постер фильма для мобильного устройства -->
  <link rel="preload" href="<%- movie.poster %>" as="image">
</head>
<body>
  <!-- Постер фильма для ПК с идентификатором "pc" -->
  <img id="pc" src="" alt="Постер фильма для ПК">

  <!-- Постер фильма для мобильного устройства с идентификатором "mobile" -->
  <img id="mobile" src="" alt="Постер фильма для мобильного устройства">

  <script>
    document.addEventListener('DOMContentLoaded', function() {
      // Получите изображение по его идентификатору в зависимости от представления
      const imagePC = document.getElementById('pc');
      const imageMobile = document.getElementById('mobile');
   
      // Получите динамический источник постера фильма для ПК
      const dynamicSourcePC = "<%- movie.poster_big %>";
   
      // Получите динамический источник постера фильма для мобильного устройства
      const dynamicSourceMobile = "<%- movie.poster %>";

      // Установите источник постера фильма для предварительной загрузки в зависимости от представления
      imagePC.src = dynamicSourcePC;
      imageMobile.src = dynamicSourceMobile;

      // Дождитесь предварительной загрузки изображений перед их отображением
      imagePC.onload = imageMobile.onload = function() {
        // Теперь изображения предварительно загружены и их можно отобразить
      };
    });
  </script>
</body>
</html>

В разделе JavaScript моего кода мне необходимо указать источник постера фильма для предварительной загрузки с использованием переменных. В настоящее время переменные <%- movie.poster %> и <%- movie.poster_big %> не оцениваются правильно и остаются в виде тегов в исходном коде страниц.

Код:

// Получите динамический источник постера фильма для ПК
const dynamicSourcePC = "<%- movie.poster_big %>";
   
// Получите динамический источник постера фильма для мобильного устройства
const dynamicSourceMobile = "<%- movie.poster %>";

Как я могу получить правильный источник постера фильма из моей серверной модели, чтобы предварительная загрузка изображения работала корректно?

С уважением

admin · 03.10.2023

Просто добавьте в /codes в админке.

JavaScript:

document.addEventListener('DOMContentLoaded', () => {
setTimeout(function(){
  (function() {
    var dataAllSrc = document.querySelectorAll('[data-cinemapress-src],[data-cinemapress-bg-src]');
    var dataAllSrcCount = (dataAllSrc && dataAllSrc.length) || 0;
    if (!dataAllSrcCount) return;
    var dataAllSrcCountComp = 0;
    var fSrc = {
      'dataCountImage': function() {
        dataAllSrcCountComp = dataAllSrcCountComp+1;
        if (dataAllSrcCount && dataAllSrcCountComp >= dataAllSrcCount) {
          dataAllSrcCount = 0;
          var st;
          window.addEventListener('load', function() {
            clearTimeout(st);
            fSrc['checkLoad']('dataSetImage');
          });
          st = setTimeout(function() {
            fSrc['checkLoad']('dataSetImage');
          }, 5000);
        }
      },
      'dataSetImage': function(el) {
        var src = el.dataset.cinemapressSrc;
        var bgSrc = el.dataset.cinemapressBgSrc;
        if (!src && !bgSrc) return;
        var img = new Image();
        img.src = src ? src : bgSrc;
        img.onload = function() {
          if (src) { el.src = src; }
          else { el.style.backgroundImage = 'url("' + bgSrc + '")';}
        }
      },
      'checkLoad': function(fn) {
        if (!dataAllSrc) return;
        dataAllSrc.forEach(function(src) {
          if (typeof src.complete === 'undefined' || src.complete) {
            fSrc[fn](src);
          } else {
            src.addEventListener('load', function() {
              fSrc[fn](this);
            }, { once: true });
          }
        });
      }
    }
    fSrc['checkLoad']('dataCountImage');
  })();
}, 3500);
});

NZT48 · 04.10.2023

admin сказал(а):

Просто добавьте в /codes в админке.

JavaScript:

document.addEventListener('DOMContentLoaded', () => {
setTimeout(function(){
  (function() {
    var dataAllSrc = document.querySelectorAll('[data-cinemapress-src],[data-cinemapress-bg-src]');
    var dataAllSrcCount = (dataAllSrc && dataAllSrc.length) || 0;
    if (!dataAllSrcCount) return;
    var dataAllSrcCountComp = 0;
    var fSrc = {
      'dataCountImage': function() {
        dataAllSrcCountComp = dataAllSrcCountComp+1;
        if (dataAllSrcCount && dataAllSrcCountComp >= dataAllSrcCount) {
          dataAllSrcCount = 0;
          var st;
          window.addEventListener('load', function() {
            clearTimeout(st);
            fSrc['checkLoad']('dataSetImage');
          });
          st = setTimeout(function() {
            fSrc['checkLoad']('dataSetImage');
          }, 5000);
        }
      },
      'dataSetImage': function(el) {
        var src = el.dataset.cinemapressSrc;
        var bgSrc = el.dataset.cinemapressBgSrc;
        if (!src && !bgSrc) return;
        var img = new Image();
        img.src = src ? src : bgSrc;
        img.onload = function() {
          if (src) { el.src = src; }
          else { el.style.backgroundImage = 'url("' + bgSrc + '")';}
        }
      },
      'checkLoad': function(fn) {
        if (!dataAllSrc) return;
        dataAllSrc.forEach(function(src) {
          if (typeof src.complete === 'undefined' || src.complete) {
            fSrc[fn](src);
          } else {
            src.addEventListener('load', function() {
              fSrc[fn](this);
            }, { once: true });
          }
        });
      }
    }
    fSrc['checkLoad']('dataCountImage');
  })();
}, 3500);
});

Большое спасибо за ваш ответ, всё работает отлично

У меня была небольшая проблема сначала, потому что в разделе Настройки > Сервер картино у меня была установлена опция Не сохранять изображения, и, видимо, для того чтобы всё заработало, нужно было разместить изображения на хостинге. После изменения настройки на Сохранять изображения JavaScript-код заработал, и постеры фильмов хорошо предзагружаются. Следующим шагом будет конвертация постеров в формат WebP, но я думаю, что с этим я справлюсь! Ещё раз спасибо!

С уважением

Проблема с предварительной загрузкой изображений в зависимости от устройства

NZT48

Продвинутый пользователь

admin

Администратор

NZT48

Продвинутый пользователь

Похожие темы