Question

我目前正在开发一个社交网站，在首页上有一个jquery accordion，其中包含以下选项

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

，手风琴的每个部分都有一个iframe [iframe或object或embed]，其中包含来自不同来源的视频，如youtube，vimeo，dailymotion，bliptv，scribd（doc）等，或者包含在flickr，imgur等中的图片

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

在.ui-accordion-content

中

在页面加载所有这些iframe和图像开始加载并使页面非常慢我想要的是

1）停止嵌入容器div的内容在页面加载时完全加载

2）当特定的手风琴部分打开时，该部分的embed-container 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();
});

寻找Crossbrowser解决方案（ie7 +，ff3 +，chrome）感谢

Answer 1

您可以动态加载手风琴的内容，以便在初始加载期间，它们不包含任何内容。然后你可以为每个折叠分配一个“折叠ID”来指示点击的折叠，并通过AJAX加载适当的内容。这样，只有我们想要看到的东西被加载，而不是全部。

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

然后在伪代码中，我们使用AJAX动态获取内容：

$.get('url_of_resources?itemid='+itemHref,function(data){
    $('div_of_accordion').html(data);
});

Answer 2

你可以设置iframe＆＃34; src＆＃34;属于youtube，vimeo等。只有在用户点击手风琴部分后才能使用。

例如。

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

防止使用jquery加载iframe和图像

2 个答案: