iframe ленивая загрузка не работает, как ожидалось - PullRequest
Новая
       52

iframe ленивая загрузка не работает, как ожидалось

0 голосов
/ 03 мая 2020

Я следовал за документами на lazyload , а также демонстрационным примером использования iframes , однако у меня возникают проблемы с отложенной загрузкой с несколькими фреймами, которые у меня отображаются на моей странице. У меня есть массив ссылок, из которых я динамически создаю фреймы для использования JavaScript. Однако, когда я настраиваю lazyload, все iframes воспроизводятся независимо от того, видны они в окне просмотра или нет. Кроме того, когда я прокручиваю вниз, фреймы над окном просмотра исчезают и перерисовываются после того, как при прокрутке назад происходит то же самое, когда я прокручиваю назад после просмотра определенных элементов под окном просмотра. Пример кода, который я использую, приведен ниже. Любая помощь будет высоко ценится спасибо. 

<script src="https://cdn.jsdelivr.net/npm/vanilla-lazyload@15.1.1/dist/lazyload.min.js"></script>
<script type="text/javascript">
            const get = async (url)  => {
                const res = await fetch(url, {
                  method: "GET"
                });
                const resData = await res.json();
                return resData;
            }
        const url = '<endpoint to retrieve links to be used in iframes>';
        get(url).then(data => {
            const lti_launch_urls = data['lti_launch_urls'];
            const loadNextIframe = index => {
                if (index >= lti_launch_urls.length) {
                    // After all iframes have been created initiate lazy load 
                    var lazyLoadInstance = new LazyLoad({
                        elements_selector: ".lazy"
                        // ... more custom settings?
                    });
                    return;
                }

                const iframe = document.createElement('iframe');
                iframe.sandbox = "allow-same-origin allow-scripts allow-popups allow-forms";
                iframe.width = "100%";
                iframe.frameBorder = "0";
                iframeId = "iframe-" + index;
                iframe.id = iframeId;
                let launch_url = lti_launch_urls[index];
                iframe.setAttribute("class", "lazy");
                iframe.setAttribute("data-src", launch_url);

                iframe.addEventListener('load', () => loadNextIframe(++index));

                console.log(iframe);
                document.body.appendChild(iframe);
            };

            loadNextIframe(0);
       })
</script>
...