xiaolai / most-common-american-idioms

A book created by xiaolai with the help of ChatGPT and its TTS
893 stars 113 forks source link

feat: 可视音频自动预加载 #7

Open thundernet8 opened 1 month ago

thundernet8 commented 1 month ago

页面滚动过程可见的 audio 自动设置 preload='auto'

thundernet8 commented 1 month ago

@xiaolai 这个在线 diff 看不出来,我截图如下 image

<script>
    // 音频懒加载
    document.addEventListener('DOMContentLoaded', function () {
        var audios = document.querySelectorAll("audio");
        audios.forEach(function (audio) {
            var observer = new IntersectionObserver(function (entities) {
                entities.forEach(function (entity) {
                    if (entity.isIntersecting && entity.target.getAttribute('preload') === 'none') {
                        entity.target.setAttribute('preload', 'auto');
                        observer.unobserve(entity.target);
                    }
                })
            }, {
            })
            observer.observe(audio);
        });
    });
</script>
thundernet8 commented 1 month ago

git 显示不太正常,可以把上面的代码贴过去(按截图示例位置),这个 PR 稍后可以关掉