我為視頻、背景圖像和圖像編寫了延遲加載代碼，但它在 safari 上不起作用

Question

我為視頻、背景圖像和圖像編寫了延遲加載代碼，但在 ios safari 上不起作用。

我想用 IntersectionObserver 方法顯示背景圖像/圖像/視頻。

以下代碼用於背景圖像和視頻。

<a href="#" id="comp-modal1" data-toggle="modal" data-target="#vidmodal" class="col-12 col-sm-3 align-self-center show-bkg lazy-bg lazy" 
        data-video="{{ get_template_directory_uri() . $video_path . $qt190}}"
        data-srcset="{{ get_template_directory_uri() }}/assets/images/vid-images/show-bk.jpg" aria-label="background">
            <div class="show-info">
                <i class="fa fa-play-circle fa-3x" aria-hidden="true"></i>
                <h3>QTech QT190 Journey</h3>
            </div>
        </a>

<video data-src="/wp-content/uploads/2019/03/Aristospray-QTech-Q5-2-minute-montage-v3-android-pad-compress.mp4"
    poster="{{ get_template_directory_uri() }}/assets/images/vid-images/pistol-suction.jpg"
    width="100%" height="auto"  
    class="lazy" 
    aria-label="video" 
    data-id="vid1">
    </video>

這是我的 JS =

    const lazy ={
        img:(img)=>{
            img.src = img.dataset.src;
        },
        background:(bg)=>{
            bg.style.backgroundImage = `url(${bg.dataset.srcset})`;
        },
        video:(vid)=>{
            vid.load();
            fetchVideoAndPlay(vid);
        },
    }
    
    
    function fetchVideoAndPlay(video){
        const preloadHolder = (document.querySelector(`#${video.dataset.id}`));
        //console.log(video.dataset.src);
        fetch(video.dataset.src)
        .then(response=> {
            video.setAttribute('data-src','');
            return response.blob();
            })
        .then(blob=>{
            video.src = URL.createObjectURL(blob);
            video.muted = true;
            preloadHolder.remove();
            return video.play();
        })
        .then(()=>{
            console.log('Played');
        })
        .catch( (e)=>{
            console.error(e);
        });
    }
    
    
    
    const lazyItems = [].slice.call(document.querySelectorAll('.lazy'));
    const configInterSection = {root: null,rootMargin: '0px',threshold: [0]};

    if ('IntersectionObserver' in window) {         
        let lazyObserver = new IntersectionObserver(function(entries){ 
            // fire lazy loading
            entries.forEach(function(item) {
                if (item.isIntersecting) {
                    
                    if(item.target.ariaLabel == 'background') lazy.background(item.target);
                    if(item.target.ariaLabel == 'image') lazy.img(item.target);
                    if(item.target.ariaLabel == 'video') lazy.video(item.target);
                    
                    // remove & add classes
                    item.target.classList.remove('lazy');
                    item.target.classList.add('lazy-loaded');
                    
                    //unboud
                    lazyObserver.unobserve(item.target);
                }
            });
        }, configInterSection);
        
        if(Array.isArray(lazyItems)){
            lazyItems.forEach(function(lazy) {
                lazyObserver.observe(lazy);
            });
        }   
        
    }

- 有沒有辦法修改 ios Safari 中的代碼？

• 此外，此代碼不適用於 Firefox。

Answer 1

item.target.ariaLabel在 v8 引擎 (chrome) 中可用。 因此我將其更改為item.target.getAttribute('aria-label')

現在它可以工作了。