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

Как я могу получить правильный источник постера фильма из моей серверной модели, чтобы предварительная загрузка изображения работала корректно?
С уважением
Я пытаюсь предзагрузить постер фильма <%- 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 %>";

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