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 callback on image load (even when the image is cached)中的解决方案：

$(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

尝试以下方法 -

加载初始页面。在此阶段保持加载屏幕不可见。
使用jQuery加载加载屏幕。
使用ajax加载图像。
成功时，隐藏淡出加载屏幕。
成功时，显示图像。代码如下：

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

<强> 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");
        });
      }
     );

});

使用jQuery加载页面

3 个答案: