完全加載后淡入Ajax內容

Question

我當前的解決方案通過AJAX獲取一些內容，將其插入DIV中，然后將其隱藏並淡入。

問題在於內容包含圖像和iframe，解決方案閃爍，並且fadeIn看起來不流暢。

我想做的只是在iframe和圖片完全加載后fadeIn 。

怎么做？

Answer 1

這將等待所有子內容完成加載：

$("#wrapperDivID").load(function (){
    // do something, e.g.
    $(this).fadeIn();
});

參見.load（） 。

在您的特定情況下，以下方法應該起作用：

$('#content').load('/echo/html/',data, function() {
  alert('fired');
}); 

Answer 2

我會更改fadeIn的持續時間，以便花一點時間。

 $("#content").load("getform.php"), function() {
                $(this).fadeIn(1500);  // or another bigger number based on your load time
 });

如果您知道頁面中將包含所有圖像，請將所有這些圖像預加載到具有div“內容”的頁面中，這樣可以節省一些加載時間。

Answer 3

另一種方法是：

$( "#content" ).fadeOut(200, function() {
    $(this).load( url, function() {
        $(this).fadeIn(200);
    });
});

將淡入和淡出時間更改為對您有利的時間。

Answer 4

如果使用$.ajax來獲取HTML，則可以包裝生成的HTML，如下所示：

$.ajax('some/path/to.html',{
    'success':function(html){
        var result = $(html).load(function(){
            $('#content').fadeIn()
        });
        $('#content').html(result);
    }
});

jsfiddle示例