Question

大师，

在我的网站上，我使用一个核心/框架PHP文件。如果用户点击了我的一个链接（如联系人，我们的约......等），则通过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; 
        }
    }
}();

预加载ajax加载的内容

2 个答案: