淡入Ajax內容後，它的滿載

我目前的解決方案是通過AJAX得到了一些內容，將其插入到一個DIV，然後隱藏它和消除它。淡入Ajax內容後，它的滿載

有這個問題的內容包含圖像和一個iframe，解決方案閃爍和fadeIn看起來不順暢。

我想要做的只是在iframe和圖片完全加載之後只有fadeIn。

如何做到這一點？

來源

2011-12-31 Ryan

你嘗試過什麼嗎？用'display：none'將你的內容加載到一個wrapper div中，然後將其放入應該工作。 – Bojangles 2011-12-31 00:57:52

@JamWaffles這就是我正在做的，但正如我所說的fadeIn發生時，圖像和iframes顯示一半 – Ryan 2011-12-31 01:06:34

這將等到所有的子內容加載完畢：

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

見.load()。

在特定情況下，下面應該工作：

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

來源

2011-12-31 00:59:30 paislee

由於容器div已經加載到DOM中加載事件不會正確地啓動時加載該div與內容一個ajax請求。請參閱：http://jsfiddle.net/subhaze/Hy4C8/2/ – subhaze 2011-12-31 03:14:30

請參閱我的編輯。你會刪除第一個.load（）並用上面的代替第二個。它具有回調函數作爲第三個（可選）參數。 – paislee 2011-12-31 03:25:36

你在這部分是正確的。但現在你使用'load'函數作爲ajax請求，而不是等待img/iframe/etc元素完全加載。見：http://jsfiddle.net/subhaze/Hy4C8/3/ – subhaze 2011-12-31 03:40:54

我會改變淡入時間，這樣它會有點長。

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

如果你知道所有的圖像都將是在頁面預加載在你有格「內容」頁面中所有的圖片，這樣你會節省一些加載時間。

來源

2011-12-31 01:25:01 Shyju

'fadeIn'參數是效果的持續時間，而不是效果的延遲。 – subhaze 2011-12-31 03:09:17

@subhaze：是的。我正是這個意思。很顯然，div會在很多毫秒後出現。我會改變語言 – Shyju 2011-12-31 03:12:14

確定很酷，對此感到抱歉。我認爲你的意思是'延遲'，就像實際的延遲/ setTimeout方式一樣...... – subhaze 2011-12-31 16:05:12

如果使用$.ajax得到HTML你可以用生成的HTML象下面這樣：

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

jsfiddle example

來源

2011-12-31 03:06:13 subhaze

另一種方式，你可以這樣做：

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

變化的淡入和時間去適合你的任何事情。

來源

2016-03-26 01:17:14 Derek

淡入Ajax內容後，它的滿載

回答

相關問題