大圖片防止DIV褪色的

我有這種設置：大圖片防止DIV褪色的

<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的內部內存。因此它會加載圖像，然後在他們再次隱藏時「忘記」它們。讓人驚訝。

有沒有人有任何想法，如何讓瀏覽器「忘記」的圖像，或者是我不應該真的採取的方向？

來源

2012-08-17 Andrey

'doGallery'做什麼？它是否適用於較小的圖像？ – Bergi 2012-08-17 13:31:13

'doGallery'做了許多事情，包括迭代每個大圖像，改變它們的位置，隱藏除前四個之外的所有內容，添加一些事件監聽器等。這些都是在用戶單擊淡入淡出的按鈕之前完成的'container2'。 – Andrey 2012-08-17 13:34:49

我不太確定它是否值得一提，但無論如何我都會這樣做 - 圖像縮小到可見大小的三分之一（在標記中使用「height」和「width」），只有當他們稍後點擊。 – Andrey 2012-08-17 13:36:41

因此，我最終將我的超高品質PNG轉換爲超高質量的JPG - 這導致文件大小減少了大約20-30％，而幾乎沒有任何明顯的質量下降。我的問題也消失了。

故事的寓意是：即使你正在開發一個不上網的頁面，你仍然需要優化你的圖片。

謝謝大家的幫助。

來源

2012-08-17 15:08:40 Andrey

大圖片防止DIV褪色的

回答

相關問題