ajax - 预加载 ajax 加载的内容

Question

在我的网站上，我使用一个核心/框架 PHP 文件。如果用户点击我的链接之一（如联系人，我们的 about..etc..），则通过 ajax 加载内容。我使用以下代码片段来实现这一点：

var AjaxContent = function(){
    var container_div = ''; 
    var content_div = ''; 
    return {
        getContent : function(url){
            $(container_div).animate({opacity:0}, 
                function(){ // the callback, loads the content with ajax
                    $(container_div).load(url, //only loads the selected portion
                        function(){                        
                           $(container_div).animate({opacity:1}); 
                    }

                );        
            });
        },
        ajaxify_links: function(elements){
            $(elements).click(function(){
                AjaxContent.getContent(this.href);
                                    

                return false; 
                
            });
        },
        init: function(params){ 
            container_div = params.containerDiv; 
            content_div = params.contentDiv;
            
            return this; 
        }
    }
}();

我需要帮助如何集成预加载，所以如果访问者点击我的一个链接（例如画廊菜单）会看到一个小的加载图像，因为现在他们看到大的白色没有很长时间 - 很长的几秒钟。

Answer 1

在 ajax 调用之前添加加载图像，在您从服务器获得响应后，只需将该图像替换为如下所示的数据

 function(){ // the callback, loads the content with ajax
        $(container_div).html("<img src='loading.gif' />");//add image before ajax call
        $(container_div).load(url, //only loads the selected portion
        function(){
         $(container_div).html(data);//replace image with server response data                        
        $(container_div).animate({opacity:1}); 
    }

Answer 2

试试这个

var AjaxContent = function(){
    var container_div = ''; 
    var content_div = ''; 
    return {
        getContent : function(url){
            $(container_div).html('Loading...');  //replace with your loading img html code
            $(container_div).load(url, //only loads the selected portion
                function(){
                    $(container_div).css({opacity:0});
                    $(container_div).animate({opacity:1}); 
            });
        },
        ajaxify_links: function(elements){
            $(elements).click(function(){
                AjaxContent.getContent(this.href);


                return false; 

            });
        },
        init: function(params){ 
            container_div = params.containerDiv; 
            content_div = params.contentDiv;

            return this; 
        }
    }
}();