使用jQuery加載頁面

Question

我有一個圖片重的網站，為了改善它的加載，我已經實現了加載屏幕。 目前，這是一個白色覆蓋與這個CSS：

#loader{
    width: 100%;
    height: 100%;
    position: fixed;
    z-index: 9999999999999999;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: url('loader.gif') 50% 50% no-repeat rgb(255,255,255);
} 

這是我目前的jQuery：

$(window).load( function(){

    $("#loader").fadeOut("slow");

});

此加載屏幕與網站的其余部分同時加載，看起來很混亂。

一旦加載並顯示加載頁面，我怎么能只加載頁面的其余部分？

Answer 1

在圖像加載的jQuery回調中使用解決方案（即使圖像被緩存） ：

$(window).load( function(){
    var totalImages = $('img').length, // count how many images are in the page
        loadedImages = 0; // keep track of how many have loaded

    // listen to the load event on every image only one time
    $("img").one("load", function() {
        loadedImages++;  // when an image loads, increment the counter
        if (loadedImages == totalImages){
            // the number of images loaded equals the number of total images in the page
            // we can consider the loading process finished here
            $("#loader").fadeOut("slow");     
        }
    }).each(function() {
        // some images might have already loaded, eg. from cache
        // iterate over all of them and if the property 'complete' exists
        // manually fire the load event above
        if(this.complete) $(this).load();
    });
});

Answer 2

如果您的網站有大量圖片，最好的辦法是在加載其余頁面后使用ajax加載圖片。 使用此方法可以更快地加載頁面。

Answer 3

試試以下 -

1. 加載初始頁面。 在此階段保持加載屏幕不可見。
2. 使用jQuery加載加載屏幕。
3. 使用ajax加載圖像。
4. 成功時，隱藏淡出加載屏幕。
5. 成功時，顯示圖像。 代碼如下：

＃

 $(function(){
     $("#loader").show();

     $.ajax(
      url: "url_to_process_ajax.php",
      type: "GET",
      data: "get=images",  // send image request to server
      success: function(data){
        // validate and process images
        // after completing image processing, fadeout loader and display the image area.
        $("#loader").fadeOut("slow", function(){
          $("#image_container").show("fast");
        });
      }
     );

});

jQuery的：

  $(function(){ $("#loader").show(); $.ajax( url: "url_to_process_ajax.php", type: "GET", data: "get=images", // send image request to server success: function(data){ // validate and process images // after completing image processing, fadeout loader and display the image area. $("#loader").fadeOut("slow", function(){ $("#image_container").show("fast"); }); } ); });