如何延迟加载 YouTube 视频

如果页面包含 YouTube 视频，则会影响页面的加载性能。那么，我们该如何解决这个问题呢？下面将介绍使用延迟加载的方式。

1) 添加 HTML

将 html 复制并粘贴到你的页面。

<div class="youtube-wrapper">
  <div class="youtube" data-embed="AAAAAAAAAAA">
    <div class="play-button"></div>
  </div>
</div>

其中，“AAAAAAAAAAAAA”需要修改为你要显示的视频号，可以通过 YouTube 视频链接直接观看。下图“IXfcOn7SSHY”为视频号。或者您可以点击 SHARE 来查看。

2) 添加 JS

复制并粘贴用于 YouTube 延迟加载的 js，完成！检查加载效果吧。

// Lazy loading YouTube videos
$(window).on('load', function(){
    setTimeout(function(){
        var tag = document.createElement('script');
        tag.src = "https://www.youtube.com/iframe_api";
        var firstScriptTag = document.getElementsByTagName('script')[0];
        firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
     }, 2000);
})
  
function onYouTubeIframeAPIReady() {
    $(".youtube").each(function(){
        var id = $(this).data('embed');

        new YT.Player($(this).get(0), {
            height: '390',
            width: '640',
            videoId: id,
        });
    })
}