Есть ли способ остановить загрузку определенных ресурсов в событии onload окна, чтобы улучшить производительность сайта?

Question

У меня есть сборка веб-сайта с использованием Vue.js.

В нем есть несколько видеороликов mp4, одно из которых - полноразмерное изображение на первом экране с текстом поверх него.Он также имеет экран загрузчика.
В настоящее время этот вид действия определяет, когда загрузчик должен быть удален.

window.addEventListener('load', () => {
        removeLoader();
    });

Проблема заключается в том, что на некоторых мобильных устройствах загрузка каждого устройства занимает около 20 секунд.ресурс (каждое видео и изображение), а затем удалите загрузчик.

Я думал сделать что-то подобное.
Просто подождать загрузки первого видео и затем удалить загрузчик.Но loadeddata событие запускается слишком рано, и в результате, единственное, что видно на полсекунды, это видео без текста.
Плюс у меня есть логика для ситуации, когда видео не может быть автоматически воспроизведено для отображения изображениявместо видео.Так что я не уверен, что это все равно будет работать.

document.addEventListener('DOMContentLoaded', () => {
        setTimeout(() => {
            document.getElementsByTagName('video')[0].addEventListener('loadeddata', () => {
                removeLoader()
            })
        }, 500)
    })

Так что я не уверен, есть ли способ загрузить все, кроме остальной части видео в событии onload?Или есть какой-то другой способ улучшить производительность сайта в этой ситуации?

Answer 1

@ Аллан, я думаю, вам нужно вообще не отображать видео и текстовые компоненты (добавляя класс с css display: none с или с непрозрачностью, если будут какие-либо проблемы), пока не сработает видео компонент loadeddata событие.В этот момент вы удаляете загрузчик и показываете эти два одновременно - какова ваша цель.

Надеюсь, это поможет.