是否可以编写一个“预加载”DOM中所有图像和视频的通用程序？

Question

所以我正在制作一个包含许多img和video元素的幻灯片，其中一些元素很大，所以我想“预加载”所有媒体资产，这样他们就没有滚动到它们所在的幻灯片时加载。

现在，根据我的理解，为了让img元素真正加载你需要“使用”它并且黑客为此基本上

var url = $myimg.attr('src');
$myimg.attr('src') = '';
$myimg.attr('src') = url;  

所以我知道我可以用

预先加载所有图像

function LoadMediaAssets ( )
{
    var $imgs = $('img'),
        k = 0;
    for ( var k = 0; k < $imgs.length; ++k ) 
    {
        var $img = $($imgs[k]), 
            url = $img.attr('src'); 
        $img.attr('src') = '';
        $img.attr('src') = url;
    }
}

我的问题是如何将video添加到混音中。你如何预加载视频？喜欢这个？

function LoadMediaAssets ( )
{
    var $imgs = $('img'),
        $vids = $('video'),
        k = 0, 
        n = $imgs.length + $vids.length;
    for ( var k = 0; k < $imgs.length; ++k ) 
    {
        var $img = $($imgs[k]), 
            url = $img.attr('src'); 
        $img.attr('src') = '';
        $img.attr('src') = url;
        console.log("Progress : " + (++k/n * 100) + "%");
    }
    for ( var k = 0; k < $vids.length; ++k ) 
    {
        var $src = $($vids[k]).find('source'), 
            url = $src.attr('src'); 
        $src.attr('src') = '';
        $src.attr('src') = url;
        console.log("Progress : " + (($imgs.length + (++k))/n * 100) + "%");
    }
}

有更好的方法吗？