场景：我有一个HTML / CSS / JavaScript幻灯片，其幻灯片为div，如
<div class="slide" id="slide1">
...
</div>
<div class="slide" id="slide2">
...
</div>
.
.
.
<div class="slide" id="slideN">
...
</div>
并且这些div包含img和video s我想要做的就是预加载这些元素，以便它们已经启动并显示当用户进入下一张幻灯片时。我想知道是否存在执行此操作的一般过程，我可以添加或减少媒体元素的过程，但它仍然有效，因为该过程并不依赖于特定元素的目标{{{ 1}}属性或其他东西。根据我的理解，它需要做一个hacky事情，你删除然后添加回src属性，如
src这是对的吗？为什么或者为什么不？
（相关说明，是否可以合并两个jQuery结果集，以便我不必在上面写两个$(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!
});
循环？）
我看到它完成的方式总是涉及要加载的图像的URL数组，例如
each来自JavaScript Preloading Images
这对我来说似乎不够普遍。
答案 0 :(得分：0)
您可以立即加载每一个并将它们放入＆＃34;银行＆＃34; display:none设置的部分，以便它们不可见。浏览器会缓存它们，并且只要您准备就绪，它们就可以显示。