可以编写一个预先加载所有图像和视频的JavaScript程序

场景：我有一个HTML/CSS/JavaScript幻灯片，其幻灯片是类似的div

<div class="slide" id="slide1">
   ...
</div>
<div class="slide" id="slide2">
   ... 
</div>
.
.
.
<div class="slide" id="slideN">
   ... 
</div>

这些CCD_ 2包含CCD_ 3和CCD_。我想知道是否存在这样做的通用过程，一个我可以添加或减少媒体元素的过程，它仍然有效，因为该过程不依赖于特定元素的src属性或其他什么。据我所知，这需要做一件棘手的事情，删除src属性，然后再添加回

$(function(){
  var $images = $('.slide img'), 
      $videos = $('.slide video'), 
      k = 0,
      n = $images.length + $videos.length; 
  $images.each(function(){
    var src = $(this).attr('src');
    $(this).attr('src') = '';
    $(this).attr('src') = src;
    console.log(k++/n * 100 + "%"); 
  });
  $videos.each(function(){
    var src = $(this).attr('src');
    $(this).attr('src') = '';
    $(this).attr('src') = src;
    console.log(k++/n * 100 + "%"); 
  });
  $('.slide').show(); // now we're ready!
});

这是正确的吗？为什么？

（相关的注意事项是，是否可以合并两个jQuery结果集，这样我就不必在上面写两个each循环了？）

我所看到的方法总是涉及到要加载的图像的URL数组，比如的例子

var images = [];
function preload() {
    for (i = 0; i < arguments.length; i++) {
        images[i] = new Image();
        images[i].src = preload.arguments[i];
    }
}
//-- usage --//
preload(
    "http://domain.tld/gallery/image-001.jpg",
    "http://domain.tld/gallery/image-002.jpg",
    "http://domain.tld/gallery/image-003.jpg"
)

来自JavaScript预加载图像

这在我看来还不够普遍。