Ajax в табах.

[ureech]

Всем привет.Делаю вывод галереи на аяксе в табах. Специфика вёрстки не позволяет сразу вывести фотки альбома в один из табов. Те, есть два таба.

<ul>
<li><a hrref=""></a>title альбома1</li>
<li><a hrref=""></a>title альбома2</li>
</ul>
<div id="content"></div>

При открытии главной страницы имею две ссылки. А нужно, что бы в
<div class="content"></div> были фотки альбома1. Сейчас фотки подгружаются аяксом в <div class="content"></div> при клике по ссылке.
Если я например подгружаю фотки до клика

$('#content').load('/photos/1060')

, то как мне потом в аяксе отменить этот лоад, или как то по другому. Не могу въехать. Пробовал подгружать в другой див и прятать в display:none, аякс не хочет работать.

[Царь Леонид]

Короче говоря, надо, чтобы при загрузке страницы сразу подгружались фотки в #content и при клике на ссылку альбом 1 потом не происходило дополнительного обращения к серверу (или где там они лежат)?

[destus]

$('#content').load('/photos/1060')

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

[brexit2000]

destus,
этого еще не хватало. Какое ему дело до трафика клиента, он что за него платит? ему надо, чтобы работало быстро, наоборот надо выкачивать по максимуму, чтобы потом на медленных соединениях загрузка не тормозила

[Царь Леонид]

destus,
этого еще не хватало. Какое ему дело до трафика клиента, он что за него платит?

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

[brexit2000]

Царь Леонид,
Это Вы о чем? Это наоборот ускорит загрузку.

[ureech]

Царь Леонид,
Да,примерно так.
destus,
Согласен, лоад можно повесить и на ссылку меню, что открывает главную.Сути не меняет.Код примерно такой.Точный остался на компе, а свет вырубили.

<ul class=" myTab">
  <li ><a href="#home" id="01" >title</a></li>
<li ><a href="#home" id="02" >title</a></li>
</ul>
<div class="tab-content">
  <div class="tab-pane"></div>
</div>

$('.myTab a').click(function (e) {
  e.preventDefault()
  var id = $(this).attr('id')
$.post('/photos/'+id, function(data) {
  $('.tab-pane').html(data); 
});
})

[Царь Леонид]

[quote=ureech;420417]Царь Леонид,
Да,примерно так.
destus,

Если так, то подгружай фотки в массивы и делай проверку, если массив не пустой, значит не делать запрос а рендерить из массива.

[Царь Леонид]

Царь Леонид,
Это Вы о чем? Это наоборот ускорит загрузку.

Это не ускорит загрузку. Картинки/скрипты и прочее блокируют отрисовку страницы. Вообще, об этом даже говорить не надо, это известная проблема, почитайте статьи на ХАбре, доклады гугл, яндекс, мейл ру, да и вообще, только ленивый не пнул эту тему

[рони]

ureech,

$(function() {
    var temp = {};
    $(".myTab a").click(function(e) {
        e.preventDefault();
        var id = $(this).attr("id");
        var data = temp[id];
        if (data) $(".tab-pane").html(data);
        else $.post("/photos/" + id, function(data) {
            temp[id] = data;
            $(".tab-pane").html(data)
        })
    })
});