Question

我有这个设置：

<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的内存。因此它加载图像，然后当它们再次隐藏时“忘记”它们。让人惊讶。

有没有人对如何防止浏览器“忘记”图像有任何想法，或者这是我不应该采取的方向？

Answer 1

因此，我最终将我的超高质量PNG转换为超高质量的JPG - 这导致文件大小减少约20-30％，而表观质量几乎没有降低。我的问题也消失了。

故事的寓意是：即使你正在开发一个不上网的页面，你仍然需要优化你的图像。

谢谢大家的帮助。

大图像可防止div消失

1 个答案: