Question

在加载视频标记之前，我们是否有任何方法或方法可以加载所有图像标记？

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'); });

});

Answer 2

JS中的

创建一个新的图像元素，其src等于要在HTML中的img元素中使用的src。无需将此图像元素放在DOM中。然后，浏览器将缓存图像，准备好在HTML请求稍后的src时从缓存中调用。

这样的事情：

var img = document.createElement('img');
img.src = "/your/image/path";

在视频标记之前加载图像标记

2 个答案: