Загрузите все iframe на блоге асинхронно

Я запускаю блог, в котором есть много видео и другого обрамленного контента.Загрузите все iframe на блоге асинхронно

типичное тело Блогпост я вытащить из моей базы данных выглядит следующим образом:

<p>some text</p> 
<iframe src="http://example.com" width="400" height="300"></iframe> 
<p>some text</p>

некоторых должности имеют 2-3 плавающих фреймов в них - отправной странице обычно показывает 6-7 плавающие фреймов.

Я бы хотел ускорить время загрузки моего блога - есть ли способ, которым я могу сделать все iframe на моей начальной загрузке асинхронно?

источник

2014-12-20 Matthias Schmidt

IFRAME загружаются асинхронно. Я предполагаю, что ваша проблема больше похожа на установку некоторой логики внутри события onload окна. Можете ли вы опубликовать какую-либо релевантную ссылку, в которой ваша проблема может быть проверена? –

Здравствуйте @ A.Wolff, вы можете получить доступ к моему блогу по адресу http://www.tapefruit.com/ –

Я вижу, что вы имеете в виду. Я попытаюсь найти какое-либо обходное решение и дам вам знать, найду ли я –

Я предлагаю вам иметь все ваши данные и идентифицировать iframes для загрузки и использования setTimeout для загрузки другого набора iframes с некоторым промежутком времени.

источник

2014-12-20 13:32:21

Как кто-то сказал в комментарии, iframes загрузить асинхронно. Возможно, то, что вы испытываете, - это медленная загрузка главной страницы, а также загрузка содержимого iframes. Я бы предложил использовать этот метод:

<!DOCTYPE html> 
<html> 
<head> 
<title>speedup page with iframes</title> 
<head> 
    <script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
</head> 
<body> 
    some content 
    <br> 
    some other content 
    <br> 
    <iframe id="data_a"></iframe> 
    <br> 
    some wild content appears 
    <br> 
    <iframe id="data_b"></iframe> 
    <br> 
    some wild content appears 
    <br> 
    <iframe id="data_c"></iframe> 
    <br> 
    the end 

    <script> 
    $(function(){ 
     //the iframes will only load AFTER your 
     //main page is fully loaded 
     $("#data_a").attr("src", "http://domain1.com/some/path/news.html"); 
     $("#data_b").attr("src", "http://domain2.com/gallery/pictures.html"); 
     $("#data_c").attr("src", "http://domain3.com/contact/map.html"); 
    }); 
    </script> 

</body> 
</html>

Надеюсь, это поможет!

источник

2014-12-20 14:26:28 andufo

Итак, я прочитал об этой теме за последние несколько дней. Особенно this article был полезен, так как он обсуждает фактическую проблему, с которой я столкнулся: запоздалое событие onload(), которое срабатывает после загрузки всех iframe.

В конце концов, что я придумал эти строки JQuery-код, который, кажется, работает для меня:

var src = new Array(); 
$(function(){ 
    // onDomReady() store all iframe sources in array 
    $('iframe').each(function(){ 
     src.push($(this).attr('src')); 
     $(this).attr('src', ''); 
    }); 
}); 

$(window).load(function() { 
    // onload() restore all iframe sources from the array 
    var i = 0; 
    $('iframe').each(function(){ 
     $(this).attr('src', src[i]); 
     i++; 
    }); 
});

Так вот в чем дело: я попробовал пару раз и без этого кода и измеряется DomReady и Load событий.

В DomReady событие срабатывает примерно в то же время (до: 1.58s, после того, как: 1.60s)

Load событие с другой стороны пожаров waaay ранее (до: 8.19s, после того, как : 1.92s)

в некотором смысле, это делает на самом деле не улучшения загрузки скорости, конечно, - во всяком случае, на мой взгляд. улучшен пользовательский интерфейс. Любые комментарии или предложения?

источник

2014-12-23 11:54:17

Загрузите все iframe на блоге асинхронно

ответ

Смежные вопросы