Javascript pre-render圖像不被顯示

我目前正在爲各種內容開發一個帶有css3轉換滑塊的ipad的html頁面。Javascript pre-render圖像不被顯示

我遇到的問題是，下一頁上的圖像還未呈現，它們會在將它們滑動到內容區域時進行渲染（儘管它們已預加載）。

有沒有什麼辦法讓瀏覽器渲染它們，而不在初始頁面請求中顯示它們，以防止圖像上的滑動效果？

/編輯：

滑塊我使用：slider

結構是這樣的：

<body> 
    <!-- wrapper --> 
    <div> 
     <!-- head --> 
     <div class="head"></div> 
     <!-- content area --> 
     <div class="content"> 
      <div class="container"> 
       <div class="pagination"></div> 
       <div class="slide-wrapper"> 
        <div class="slide"> 
         <!-- content with images here --> 
        </div> 
        <div class="slide"></div> 
        <div class="slide"></div> 
        <div class="slide"></div> 
        <div class="slide"></div> 
       </div> 
      </div>  
     </div> 
     <!-- foot --> 
     <div class="foot"></div> 
    </div> 
</body>

圖像 - 預壓：

function preload() { 
    $('img').each(function(){ 
     $('<img/>')[0].src = $(this).attr('src'); 
    }); 
}

來源

2012-12-20 Mohammer

如何頁面結構？請分享一些代碼。 – BenM

請顯示您用於預加載圖像的代碼。 – jfrej

的一般技術是將它們設置爲visibility: hidden（內聯樣式，以確保它在任何外部之前應用al CSS被下載） - 並將其設置爲visibility: visibleimage.onload處理程序。

<img src="..." style="visibility: hidden" onload="this.style.visibility = 'visible';">

編輯

$('img').each(function(){ 
    $(this).css('visibility', 'hidden'); 
    $('<img/>')[0].src = $(this).attr('src'); 
    $(this).load(function() { 
     $(this).css('visibility', 'visible');   
    }); 
});

來源

2012-12-20 10:37:35 techfoobar

這不適合我。如果那麼簡單，會很棒。 – Mohammer

檢查我的編輯，可能工作。 :-) – techfoobar

沒有工作。我現在要做的就是讓滑塊滑動vom開始結束並回退，同時擁有一個透明層，直到它再次開始。 thx爲迄今爲止的努力！ – Mohammer

這將迫使瀏覽器預裝的所有圖像

$('img').each(function(){ 
    var image = new Image(); 
    image.src = $(this).attr('src')  

});

來源

2012-12-22 18:01:50

Javascript pre-render圖像不被顯示

回答

相關問題