2011-03-21 79 views
0
$(function(){  
     $(document).ready(function() { 
    $('#demo_content').html('<img src="http://v.com/ajax-loader-1.gif"alt="Wait" />'); 

     $('#demo_content').load('http://vbizmarketing.com/myphp.php?nice=9176198'); 
     return false; 
     cache:false 

    }); 
}); 

這可以創造奇蹟,我gratefull爲stackover流社區幫助我原來的問題,但我一直在試圖撥打了jQuery,AJAX,負載,準備

$('#demo_content ').html('IMAGE HERE');

在一個單獨的div,這樣我可以加載圖像居中,而不是放置在左對齊的文本,我實際上是從另一個文件拉。

任何意見或建議,非常感謝。

謝謝

+0

爲什麼你有一個嵌套在速記版本內的longhand document.ready函數? – 2011-03-21 23:38:12

+0

我真的不能提供一個合乎邏輯的回答你的問題,我是新來的ajax和JavaScript和上面的腳本工作 – 2011-03-21 23:40:40

+0

它會工作,但擺脫'$(document).ready(function(){'code。You只需要'$(function(){'block。 – 2011-03-21 23:41:50

回答

2

你的意思只是一個css規則居中圖像?

在一個單獨的DIV

,這樣我可以有 加載圖像居中,而不是 被放置到左對齊文本 ,我實際上是從 另一個文件拉動。

你可以用一些CSS和回調的​​

的CSS做到這一點:

#loading{ 
    text-align:center; 
    display:none; 
} 

標記:

<div id="demo_content"> 
    <div id="loading"> 
     <img src="http://vbizmarketing.com/ajax-loader-1.gif"alt="Wait" /> 
    </div> 
    <div id="content"></div> 
</div> 

腳本。

$(function() { 
    $("#loading").show(); //show the loading div. 

    $('#content').load('http://vbizmarketing.com/myphp.php?nice=9176198', function() { 
     $("#loading").hide(); //use the callback function for the load method to hide the loading div 
    }); 
}); 

jsfiddle代碼示例。

+0

@ Mark-我的目標是允許'加載圖像'居中,一旦完成加載,然後使用加載內容並將其放置到單獨的div中。因爲現在加載欄工作正常,並且一切都很好,它只是我無法弄清楚如何將加載圖像放到不同的div中,一旦加載完成,加載消失 – 2011-03-21 23:49:25

+0

我想我要去實現.ajaxStop() – 2011-03-21 23:56:28

+0

查看更新,你也可以使用'load()'方法的回調來隱藏div。 – 2011-03-22 00:01:18

0
$("#div").ajaxStop(function(){ 
    $(this).hide(); 
}); 

該功能一旦內容被裝載 感謝所有的意見隱藏加載條。

1

我有點不清楚你試圖完成/有問題。但在這樣的情況下 - 我已經完成以下操作:

function loadImage() 
{ 
    $('div#container') 
     .html( "<img class='spinner' src='" + ajax spinner path + "'/>" ) 
     .fadeIn(); 

    var newImg = new Image(); 
    $(newImg) 
     .load(function() 
      { 
       $('div#container') 
        .stop() 
        .css({ 
         'opacity' :'1.0' 
        }) 
        .html(newImg); 

       $(this) 
        .hide() 
        .fadeIn(); 
      } 
     ) 
     .attr( 'src' , ' new image path here ') 
     .error(function() 
      { 
       $('div#container') 
       .html("<img src='" + loadFailUrl+ "'/>") 
      } 
     ); 
} 

所以 - 首先將容器div與.html一起追加。這將是加載圖形的路徑。

函數的第二部分創建一個新的Image元素,附加一個加載事件和一個錯誤事件。附加src .attr定義了src路徑,並啓動加載。

加載事件包含一個匿名回調函數,該函數在當前fadeIn()動畫(如果其正在運行)上調用stop,並將html附加到新創建的圖像(同時刪除加載圖形)。

最後,圖像得到一個fadeIn()序列。

這樣做只有大約17,233個方法。我已經成功地使用了這個...

乾杯!