2011-11-24 47 views
0

我的問題很簡單,我想顯示一個divJQuery的預緊頁

我在我的索引頁有一個主要的div之前預先加載網頁:#data_div

我加載配頁很多圖像到該Div ...(不僅圖像,很多標記太)

我使用另一個div來預加載頁面,該div是不可見的(但不隱藏也不是爲了保持良好的數據格式加載) :#data_loading;

我使用加載符號一個div:#wait_div

我想我需要的阿賈克斯相當於JQUERY負荷(事件,不加載法) ,但我不能將此事件設置爲一個div(.. 。)所以我需要另一種解決方案

 $.address.change(function(event) { 
        $("#wait_div").show(); 

        if(event.value == "/") { 
         $.address.value("index.php"); 
        } else if(event.value.substr(1, 5) == "Datas") { 
         $("#data_loading").load(event.value, { 
          'ajax' : 'true' 
         },function(){ 

    /* i would like that this occur only when the page is fully loaded 
(including image and scripts) inside the temp div */ 
          $("#data_div").children().remove(); 
          $("#wait_div").hide(); 
          $("#data_loading").children().appendTo($("#data_div")).fadeIn(1000); 
           //alert("done"); 
          }); 
         }); 
        } 
       }); 
+0

在這個問題看一看+回答 [http://stackoverflow.com/questions/476679/preloading-images-with-jquery][1] [1]:http://stackoverflow.com/questions/476679/preloading-images-with-jquery – Nick

+0

謝謝,但我不想加載單個圖像,只需要我的div在顯示之前完全呈現它(也包括腳本) – guillaume

+1

does [this answer](http ://stackoverflow.com/q/545005/829835)幫助所有? ***提示*** *它應該* - 也看看其餘的答案,他們*主要*所有提供良好的建議。 – rlemon

回答

1

檢查this回答我的問題

吳丹的,你怎麼知道什麼時候所有的圖像加載,你可以給一個類的圖片您的臨時格內,做這樣的事情在您的新的一頁:

$(document).ready(function(){ 
    var imgs = $("img.tempDivImages"), cnt = imgs.length; 

    imgs 
    .load(function(){ 
     if(!--cnt) { 
     /* all images loaded */ 
     /* now call the function you want when everything is loaded*/ 
     } 
    }) 
    .error(function() { /* whoops an image failed to load */}); 
    }); 

這是怎麼了你得到馬蹄蓮功能或做一些事情時,你的臨時股利的一切都加載。

+0

謝謝你! – guillaume

0

another question(不是jQuery的,但JavaScript的)回答了這個:

注意:您可以在HTML中添加加載信息,並隱藏在預緊結束()功能。

的JavaScript

function preload() { 
    imageObj = new Image(); 
    images = new Array(); 
    images[0] = 'img/1.png'; 
    images[1] = 'img/2.png'; 
    images[2] = 'img/3.png'; 
    images[3] = 'img/4.png'; 
    images[4] = 'img/5.png'; 

    for (i = 0; i <= 4; i++) 
     imageObj.src = images[i]; 
} 

HTML

<body onload="preload();"> 
    .... 

    <!--[if IE]> 
     <div id="preload"> 
      <img src="img/1.png" width="1" height="1" alt="" /> 
      <img src="img/2.png" width="1" height="1" alt="" /> 
      <img src="img/3.png" width="1" height="1" alt="" /> 
      <img src="img/4.png" width="1" height="1" alt="" /> 
      <img src="img/5.png" width="1" height="1" alt="" /> 
     </div> 
    <![endif]--> 
</body> 

CSS爲IE

#preload { 
    position: absolute; 
    overflow: hidden; 
    left: -9999px; 
    top: -9999px; 
    height: 1px; 
    width: 1px; 
} 
+0

謝謝你的回答,但我不想分開加載圖像,我只想提出一個事件,當我的「頁面」完全加載...在臨時div ... – guillaume