javascript - 在视频标签之前加载图片标签

Question

在加载视频标签之前，是否有任何方式或方法可以在 HTML 中加载所有图像标签？

Answer 1

您的图片和视频来自不同的来源，因此它们将同步加载，我们必须等到图片加载后再加载视频...

要用 jQuery 做到这一点，我们使用 $(window).load 类似于 DOM ready 的使用方式，它会等待标记中的所有内容加载完毕。

您没有提供 HTML，也没有提供有关如何包含视频的信息，因此我将使用视频标签创建一个简单的示例。您可以将逻辑应用于另一个方法。

<!-- Images are not changed, as you want them to load anyway -->
<img src="/images/someimage.jpg" alt="Some image" />
<img src="/images/someotherimage.jpg" alt="Some other image" />

<!-- Videos are pending, replace src with data-src -->
<video width="320" height="240" controls>
    <source data-src="movie.mp4" type="video/mp4" />
    <source data-src="movie.ogg" type="video/ogg" />
</video>

jQuery

$(window).load(function() {
    // this will not execute until images have loaded
    // find video > source tags
    $('video source').each(function(){
        // set the src of them from the data we stored
        $(this).attr('src', $(this).data('src'));
    });

    // or if you prefer
    //$('video source').attr('src', function(){ return $(this).data('src'); });

});