顯示外部頁面並在div中加載gif

我可以通過div來顯示外部頁面的內容，但加載gif不會顯示。任何人都可以請更正我的代碼。 TIA顯示外部頁面並在div中加載gif

<a href="javascript:void(0);" id="load-extmsg">blah</a> 

<script type="text/javascript"> 
$(document).ready(function(){ 
$('#load-extmsg').click(function(){ 
    $("#extmsg").load("blah.php", function(){ 
     $("#ajaxLoader1").remove(); 
    }); 
}); 
</script> 

<div id='extmsg'><img src="/images/ajaxLoader2.gif" id="ajaxLoader1"/></div>

下面是一個小試驗和錯誤之後正確的代碼：

<a href="javascript:void(0);" id="load-extmsg">blah</a> 

<script type="text/javascript"> 
$(document).ready(function(){ 
$('#load-extmsg').click(function(){ 
$("#ajaxLoader1").show(); 
    $.post('blah.php', function(data){ 
     $("#ajaxLoader1").remove();; 
     $("#extmsg").append(data); 
    }) 
}); 
}); 
</script> 

<div id='extmsg'><img src="/images/ajax-loader2.gif" id="ajaxLoader1" style="display:none;" /></div>

來源

2011-06-23 Patriotec

我看到這裏沒有問題。

您正在加載器的頂部加載。

試着做這樣的事情，而不是：

$('#load-extmsg').click(function(){ 
    $("#ajaxLoader1").show(); 
    $.post('blah.php', function(data){ 
     $("#ajaxLoader1").hide(); 
     $("#extmsg").append(data); 
    }) 
});

添加一些CSS隱藏加載圖像：

#ajaxLoader1 { 
    display: none; 
}

來源

2011-06-23 17:53:35 Neal

圖像沒有顯示，因爲我忘了「 - 」在加載GIF的名字，但圖像始終在div顯示。我希望gif顯示，當我點擊，直到外部頁面加載。我應該把加載GIF和一些JavaScript的外部頁面，而不是在主頁上的div？ – Patriotec

這正是我的答案中的代碼應該做的 – Neal

加載gif一旦頁面加載，我點擊鏈接之前就會出現。我需要gif在div中顯示onclick，然後在外部頁面加載到同一個div後消失。 TIA – Patriotec

我還要確保圖片的路徑是有效的（合理性檢查）

您還可以在點擊後檢查加載圖像（ajaxLoader2.gif）是否實際在頁面上。只要在FireFox中檢查元素（w /螢火蟲）

否則，如果圖像存在，我看不到任何可能會隱藏的樣式問題。

感謝

來源

2011-06-23 18:05:06 kheya

您也可以在圖像下方添加另一個div，並將外部頁面內容放到該div。那樣父母div將永遠有圖像。 – kheya

你有$（「＃ajaxLoader1」）。remove（）會在加載blah.php後刪除圖片。負載發生得太快，以至於看不到圖像？ – kheya

圖像沒有顯示，因爲我在加載gif的名字時忘了' - '，但圖像總是顯示在div中。我希望gif顯示，當我點擊，直到外部頁面加載。我應該把加載GIF和一些JavaScript的外部頁面，而不是在主頁上的div？ – Patriotec

顯示外部頁面並在div中加載gif

回答

相關問題