我有这个设置：
<div id="container1">
<!-- content from one section -->
</div>
<div id="container2" style="display:none;">
<div id="sub-container">
<img src="image1.png" />
<img src="image2.png" />
<!-- 20 or so images sit here -->
</div>
</div>
container1最初显示。在 document.ready 上，除了前四个图像之外的所有图像都被隐藏起来，以便构建一个旋转木马。用户单击一个按钮，container1淡出和container2淡入。
用户第一次单击按钮时，container2不会淡入，而是直接跳转到可见状态。第二次，淡入正常工作。
所涉及的图像相当可观（总大小约为 10MB），但这并不是问题，因为该页面旨在在本地查看。如果我有一个或两个图像，问题就不会出现这一事实告诉我，浏览器正在努力同时加载图像和淡入。第二次加载时，图像已被缓存并正常淡入。
我尝试了一种像这样的预加载形式：
/* take the div outside the viewport but still render it */
.hide {
position: absolute;
top: -9999px;
left: -9999px;
}
var cacheContainer = "<div class='hide'></div>",
$images = $("#sub-container img");
// move the images to the container
$(cacheContainer).appendTo("body").append($images);
// hopefully 500ms would be enough for the images to render?
setTimeout(function () {
images.appendTo("#sub-container");
doGallery(); // build carousel
},500);
...然而，这会导致同样的问题 -container2第一次弹出而不是消失，之后工作得很好。
有任何想法吗？
根据要求，这是我用来隐藏/显示容器的内容：
$(document).ready(function() {
var $currentTab = $("#container1"),
$newTab,
newTabName;
// a couple of more unrelated setting up functions go here
doImageCaching(); // the function I've got above
$("#container2").hide();
$("#tab-links>a").click(function(e) {
e.preventDefault();
// probably a bit cheeky doing it this way but oh well
newTabName = $(this).attr("id").replace("-btn", "");
if($currentTab.attr("id") === newTabName) {
return;
}
$newTab = $("#" + newTabName);
$newTab.stop(true, true).fadeToggle(200);
$currentTab.stop(true, true).delay(100).fadeToggle(200);
$currentTab = $newTab;
$newTab = null;
});
});
以下#tab-links供参考：
<div id="tab-links">
<a id="container1-btn" href="#">show container 1</a>
<a id="container2-btn" href="#">show container 2</a>
</div>
编辑 2所以我刚刚注意到一些新的东西：所以我第二次切换到container2它时会像往常一样淡入淡出。如果我等待 10 秒左右，然后尝试container2 再次切换到，问题再次出现。
所以在我看来加载 DOM 与此无关，我正在处理 Chrome 的内部存储器。因此它会加载图像，然后在它们再次隐藏时“忘记”它们。哎呀。
是否有人对如何防止浏览器“忘记”图像有任何想法，或者这是我不应该采取的方向？