jquery 视频延时加载

基础概念

jQuery 视频延时加载是一种优化网页性能的技术，它允许网页在用户滚动到视频位置时才加载视频内容，而不是一次性加载所有视频。这种技术可以显著减少网页的初始加载时间，提高用户体验。

类型

基于滚动的延时加载：当用户滚动到视频位置时，触发视频加载。
基于预取的延时加载：在用户可能滚动到的区域提前加载视频，以提高用户体验。

应用场景

长页面：包含大量视频内容的网页，如新闻网站、视频博客等。
移动设备：由于移动设备的带宽和性能限制，延时加载尤为重要。
广告视频：在用户滚动到广告位置时才加载广告视频，减少不必要的流量消耗。

示例代码

以下是一个简单的基于滚动的 jQuery 视频延时加载示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Video Lazy Loading</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <style>
        .video-container {
            height: 300px;
            width: 500px;
            margin-bottom: 20px;
        }
        .video-placeholder {
            background-color: #f0f0f0;
            height: 100%;
            width: 100%;
        }
    </style>
</head>
<body>
    <div class="video-container">
        <div class="video-placeholder"></div>
    </div>
    <div class="video-container">
        <div class="video-placeholder"></div>
    </div>
    <!-- Add more video containers as needed -->

    <script>
        $(document).ready(function() {
            function loadVideo($container) {
                var videoUrl = $container.data('video-url');
                if (videoUrl) {
                    $container.html('<video controls><source src="' + videoUrl + '" type="video/mp4"></video>');
                    $container.removeData('video-url');
                }
            }

            function checkVideos() {
                $('.video-placeholder').each(function() {
                    if ($(this).offset().top < $(window).scrollTop() + $(window).height()) {
                        loadVideo($(this).parent());
                    }
                });
            }

            $(window).scroll(checkVideos);
            checkVideos(); // Initial check
        });
    </script>
</body>
</html>