1

私のサイトでは、1 つのコア/フレーム PHP ファイルを使用しています。ユーザーが私のリンクの 1 つ (連絡先、私たちについてなど) にアクセスすると、コンテンツが 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; 
        }
    }
}();

プリロードを統合する方法を教えてください。訪問者が私のリンクの 1 つ (ギャラリー メニューなど) をクリックすると、小さなロード イメージが表示されます。

4

2 に答える 2

1

これを試して

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; 
        }
    }
}();
于 2012-11-29T09:48:21.330 に答える
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}); 
    }
于 2012-11-29T08:51:16.760 に答える