Предотвратить загрузку фреймов и изображений с помощью jquery - PullRequest
Новая
       25

Предотвратить загрузку фреймов и изображений с помощью jquery

3 голосов
/ 26 марта 2012

В настоящее время я работаю над сайтом социальной сети, на первой странице которого есть jquery аккордеон со следующими параметрами 

$( "#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-контейнер embed-контейнера этой секции должен загружаться

3) когда секция аккордеона закрывается, iframe или изображения embed-container прекращают всю загрузку

пока я пробовал это 

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

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

В поисках решения Crossbrowser (т.е. 7 +, ff3 +, хром) Спасибо

Ответы [ 2 ]

0 голосов
/ 26 марта 2012

Вы можете просто установить атрибут iframe "src" на youtube, vimeo и т. только после того, как пользователь нажмет на секцию аккордеона.

например. 

$('.ui-accordion').bind('accordionchangestart', function(event, ui) {
   ui.newContent.find('.embed-container iframe').attr('src', 'http://www.vimeo.com');
});
0 голосов
/ 26 марта 2012

вы можете загружать содержимое аккордеона динамически, чтобы во время начальной загрузки они ничего не содержали. затем вы можете назначить «идентификатор фолда» для каждого сгиба, чтобы указать, на какой фолд кликнули, и загрузить через 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);
});
...