Angular 17. Как создать загрузку внутри цикла for?
У меня есть веб-сайт, который представляет собой видеогалерею моего YouTube, и эти видео построены в теге iframe. Но я хочу использовать некоторую загрузку в этом цикле for, потому что когда я открываю страницу, загрузка происходит медленно. Что я делаю?
Мой код:
`@for (link of youtubeLinks; track $index) {
<div class = "video-container mx-1 mb-2">
<iframe #youtubeVideos
width = "315"
height = "560"
[src] = "getVideoSrc(link)"
frameborder = "0"
allow = "accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
allowfullscreen>
</iframe>
</div>
}`
Я использовал директиву @defer, но она не сработала.
Я хотел, чтобы каждый iframe загружался при прокрутке страницы или каждый из них загружался одновременно, а не все сразу после входа на страницу.
Ответы 1
Вы можете использовать @defer, но если вы внимательно прочитаете документацию, вы заметите
Тип блока, который можно использовать для отсрочки загрузки JavaScript для компонентов, директив и каналов, используемых внутри шаблона компонента.
Ваш элемент iframe не соответствует этому описанию. Итак, вам следует переместить iframe в отдельный компонент, а затем использовать @defer для обертывания вашего компонента.
@defer (on viewport) {
<app-video [src] = "link" [width] = "width" [height] = "height"/>
}
@placeholder {
<div [style.width.px] = "width" [style.height.px] = "height">Loading...</div>
}
важно задать размер заполнителя вашего iframe, потому что в противном случае все заполнители вашего видео будут находиться в области просмотра, что приведет к немедленной загрузке каждого видео. Поэтому вам следует зарезервировать место на странице с помощью заполнителей фиксированных размеров, равных iframe.
Таким образом, когда вы открываете страницу, вы сначала увидите заполнитель, затем angular видит, что первый заполнитель находится в области просмотра, что приведет к загрузке первого компонента, затем, когда вы прокручиваете до второго - применяется тот же сценарий и т. д.
Результат: https://stackblitz.com/edit/stackblitz-starters-y1wozs?file=src%2Fmain.ts