防止使用 jquery 加载 iframe 和图像

Question

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

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

，手风琴的每个部分都有一个 iframe[iframe 或对象或嵌入]，其中包含来自不同来源的视频，如 youtube、vimeo、dailymotion、bliptv、scribd(doc) 等或来自 flickr、imgur 等的图像包装在

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

在 .ui-accordion-content 中

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

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

2) 当一个特定的手风琴部分打开时，该部分的嵌入容器 div 应该加载

3) 当手风琴部分关闭时，embed-container 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+,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 的“src”属性设置为 youtube、vimeo 等。只有在用户点击手风琴部分之后。

例如。

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