2012-03-26 19 views
3

我目前工作的一個社交網站,首頁上有一個jQuery accordion有下列選項防止內部框架和圖像從使用jQuery

$("#accordion").accordion({ 
     autoHeight: false, 
     animate:"fast", 
     active: false, 
     collapsible: true }); 

加載,手風琴的每個部分都有無論是IFRAME [IFRAME或對象或嵌入含有從例如YouTube,VIMEO,土豆網,bliptv,scribd(DOC)不同源的視頻等,或從Flickr圖像,imgur等包裹在

<div class="embed-container"></div> 

的.ui-手風琴式內容內

在頁面加載所有這些iframe和圖片開始加載,使網頁很慢 我要的是

1)在頁面加載完全停止加載嵌入容器DIV的內容

2)當特別手風琴部分打開,然後嵌入容器該部分的DIV應該加載

3)當手風琴部關閉,嵌入-div容器iframe或圖像應該停止所有裝載

到目前爲止我試圖此

$('.embed-container').hide(); 

$('.ui-accordion').bind('accordionchangestart', function(event, ui) { 
ui.newContent.find('.embed-container').show(); 
ui.oldContent.find('.embed-container').hide(); 
}); 

尋找一個跨瀏覽器的解決方案(IE7 +,FF3 +,鉻) 感謝

+0

digg在這裏很好用http://digg.com/news/all/videos/recent有人可以告訴我怎麼做? – 2012-03-26 07:42:03

回答

0

可以加載手風琴的內容動態,以便在初始加載過程中,它們含有什麼。那麼您可以爲每個摺疊指定一個「摺疊ID」,以指示單擊的摺疊次數,並通過AJAX加載適當的內容。這樣,只有我們想要看到的是加載,而不是全部。

<h3> 
    <a href="#3">Section 3</a> //this example uses href as an id 
</h3> 
<div> 
    <p> 
     accordion contents 

然後在僞代碼中,我們得到動態使用AJAX的內容:

你可以只設置iframe的 「src」 屬性到YouTube
$.get('url_of_resources?itemid='+itemHref,function(data){ 
    $('div_of_accordion').html(data); 
}); 
+0

我有這個想法,但我避免它,因爲很多AJAX請求,謝謝 – 2012-03-26 06:45:21

+0

這將更多的*「很多」*?無論是否需要在onc上加載多個東西?或僅在需要時使用AJAX加載它們? – Joseph 2012-03-26 06:47:38

0

,VIMEO等。只有在用戶點擊手風琴部分之後。

例如。

$('.ui-accordion').bind('accordionchangestart', function(event, ui) { 
    ui.newContent.find('.embed-container iframe').attr('src', 'http://www.vimeo.com'); 
}); 
+0

是的,刪除封閉容器內容的部分關閉和注射部分打開將是我的最後一個選擇,但想要這樣做,就像這裏http://digg.com/news/all/videos/recent,不知道如何謝謝 – 2012-03-26 11:00:30

+0

爲什麼這是你的最後一個選擇?聽起來這正是你想要的。它看起來像Digg有一個預先嵌入的Flash視頻播放器(ooyala),而不是使用iframe。只有在顯示播放器元素時纔會呈現Flash。它還傳遞給它的數據鏈接到視頻的實際來源。 – 2012-03-26 18:06:33

+0

我期待更加優雅的方法爲jquery中的「延遲加載」html,當我看着那個digg鏈接時,他們只是在做顯示:沒有嵌入容器,但它們有內部對象標記,而不是iframe,可能就是這樣有所作爲? – 2012-03-27 06:05:14