Пула предустановленных

Question

фреймов Моего приложение просто загружает реальный HTML страницы в первый раз (заголовка, содержания, врезки и сноска). Затем каждый щелчок по ссылке загружается через AJAX и отображается (просто загружает новый контент).

Некоторое ajax загружено содержание содержание один или несколько фреймов. Некоторые пользователи сообщают, что, когда они нажимают на некоторые страницы (нажмите на боковую панель ), страница занимает слишком много времени для загрузки. Эти страницы, на которые они указывают, являются страницами с 4 или 5 фреймами внутри. Приложение отправляет что-то вроде:

<div> 
    Content... 
    <iframe style="display:none" src="URL1"></iframe> 
    <iframe style="display:none" src="URL2"></iframe> 
    <iframe style="display:none" src="URL3"></iframe> 
    <iframe style="display:none" src="URL4"></iframe> 
    More content... 
</div> 

Iframes изначально скрыты и отображаются по запросу пользователя (не возможно загрузить по запросу пользователя, потому что это делает даже худший пользовательский опыт). Поэтому проблема заключается в том, как ускорить загрузку этих фреймов при загрузке страницы.

Я думал, что я создаю пул iframe, поэтому я просто загружу 5 фреймов при загрузке первой страницы (когда я загружаю заголовок, боковую панель и нижний колонтитул), а затем повторно использую эти iframes по требованию, поэтому вызов AJAX будет вернуть кусок кода, как это:

<div> 
    Content... 
    <div class="iframe" style="display:none" src="URL1"></div> 
    <div class="iframe" style="display:none" src="URL2"></div> 
    <div class="iframe" style="display:none" src="URL3"></div> 
    <div class="iframe" style="display:none" src="URL4"></div> 
    More content... 
</div> 

и успеха обратного вызова назначить каждый div.iframe с соответствующим IFRAME.

Будет достаточно, чтобы ускорить загрузку страницы и улучшить работу пользователя? Есть ли какой-либо jquery-плагин или код, который уже делает это или похоже? Есть ли другая альтернатива?

Answer 1

Иван,

Вы можете загрузить первую страницу полностью, а затем начать загрузку с помощью AJAX Iframes в какой-то кэш (строки JSON возможно?). Как вы говорите, вы можете загружать кешированный контент по мере запроса пользователем. Не забудьте также обслуживать людей, у которых отключен javascript.

Если вы обнаружите, что запрос на загрузку iframe по мере необходимости (не предварительно загружен), стоит исследовать, почему они медленно загружаются. Что происходит, когда вы загружаете iframe src напрямую?

Почему вы используете так много фреймов? Если все они указывают на внешние веб-сайты, это замедлит время загрузки, так как каждая страница будет отображаться до того, как ваш запрос AJAX сможет вытащить контент на вашу страницу. Если они указывают на внутренние (локальные) страницы, то, возможно, посмотрите на их использование?

Answer 2

Прежде всего: до тех пор, пока вы контролируете весь контент, и у вас нет серьезных аргументов, вы не должны использовать iframes. Они добавляют некоторые накладные расходы, не подходят для SEO, и они не могут работать.

Также старайтесь сделать начальную пагулу как можно более легкой. Не загружайте все, но используйте асинхронные вызовы для получения остальной части контента (начиная с материала, который, скорее всего, будет запрашиваться рядом с пользователем).

Не бойтесь позволить пользователю подождать некоторое время. Он привык к тому, что при нажатии ссылки происходит некоторое время ожидания. Важно отметить, что вы указываете, что что-то происходит (используйте для этого spinner).

Другим важным аспектом использования AJAX является история. Пользователь ожидает, что кнопка back- (и forward-) будет работать по назначению. AJAX не поддерживает само по себе. Рассмотрите возможность использования jQuery истории pugin как this one, чтобы значительно улучшить удобство использования вашего приложения.

Я бы коснуться, как это:

<div id="content1" style="display:none"></div> 
<div id="content2" style="display:none"></div> 
<div id="content3" style="display:none"></div> 

loadContent(); 

function loadContent(){ 
    // asynchronously load content1, upon success content2, and so on, 
    // until all resources are loaded 
} 

теперь ваш вызов Ajax содержит только данные для каждого отдельного DIV без каких-либо накладных расходов. Это экономит полосу пропускания и ускоряет время загрузки - разбивая содержимое на куски, клиент может быстрее реагировать (если у вас нет проблем с большим количеством HTTP-запросов, возникающих с помощью этого метода).