JQuery .load()

[Aroused]

$("#content").load('work/content.html',              // здесь подгружаем хтмл с дивом в котором изображения,
   function() {                                     // начинаем функцию callback,
   $("#content").show("slide", { direction: "right" }, 1100);   // анимация show* блока с содержанием которое мы подгрузили,
   });

по сути получается, в момент, как содержимое content.html попадает в #content начинается выполнение callback.

Вопрос:

как сделать чтобы анимация (которая сейчас в callback) начиналась после того эти картинки будут загружены?

[Golgi]

подобное на форуме было и ответ был там дан, стоит поискать.

Даже вот, сам нашел

[Aroused]

подобное на форуме было и ответ был там дан, стоит поискать.

Даже вот, сам нашел

Так сут не в одной, а в массиве картинок. Как только они подгружаются "Все" только потом анимация.

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

Edited August 9, 2011 by Aroused

[Nekromancer]

Как минимум нужно тогда знать количество картинок.

[Aroused]

Как минимум нужно тогда знать количество картинок.

Ну это ж вообще не вопрос =)

<ul id="cordiant_thelist">
    <li><img src="work/Cordiant_cont/Cordiant_sport_960x600.jpg" width="840" height="500"></li>
    <li><img src="work/Cordiant_cont/Cordiant_first_wheel_960x600.jpg" width="840" height="500"></li>
    <li><img src="work/Cordiant_cont/Cordiant_sport__OUTDOOR_960x600.png" width="840" height="500"></li>
    <li><img src="work/Cordiant_cont/Cordiant_sport_wobler_960x600.png" width="840" height="500"></li>
    <li><img src="work/Cordiant_cont/Cordiant_sketches.jpg" width="840" height="500"></li>
    <li><img src="work/Cordiant_cont/Cordiant_sport_MAking-off_960x600.png" width="840" height="500"></li>
    <li style="display:none"><img width="633" height="470"></li>
</ul>

[Nekromancer]

Хотя, в общем наверно и не надо, эт я что то задумался. Если последний код, что вы привели есть код из "content.html" то:

var content = $("#content").load('work/content.html', function(){
   var count = 0, imgs = $('img').load(function(){
      ++count == imgs.size() && content.show("slide", { direction: "right" }, 1100);
   });
});

Приблизительно так.

[Aroused]

Хотя, в общем наверно и не надо, эт я что то задумался. Если последний код, что вы привели есть код из "content.html" то:

var content = $("#content").load('work/content.html', function(){
   var count = 0, imgs = $('img').load(function(){
      ++count == imgs.size() && content.show("slide", { direction: "right" }, 1100);
   });
});

Приблизительно так.

Спасибо, сейчас попробую, кстати у вас анимация не тормозит на сайте? Это нужно скрипты править? Я слышал что значек $ заставляет поновой браузеру по думу пробегаться.

[Nekromancer]

Хотя, в общем наверно и не надо, эт я что то задумался. Если последний код, что вы привели есть код из "content.html" то:

var content = $("#content").load('work/content.html', function(){
   var count = 0, imgs = $('img').load(function(){
      ++count == imgs.size() && content.show("slide", { direction: "right" }, 1100);
   });
});

Приблизительно так.

Спасибо, сейчас попробую, кстати у вас анимация не тормозит на сайте? Это нужно скрипты править? Я слышал что значек $ заставляет поновой браузеру по думу пробегаться.

Если вы говорите про тот сайт, что привели ссылку - то он вообще криво сделан. Ваш сайт вы не показывали.

На счёт значка - это обычная переменная занятая библиотекой. Ну естественно библиотека занимает свою толику памяти из таба, но это мелочи.

[Aroused]

Если вы говорите про тот сайт, что привели ссылку - то он вообще криво сделан. Ваш сайт вы не показывали.
На счёт значка - это обычная переменная занятая библиотекой. Ну естественно библиотека занимает свою толику памяти из таба, но это мелочи.

То что криво, тут уж не ругайте, у меня опыта нет

это и есть он, я над ним вожусь, с флеша перехожу на html 5.

[Nekromancer]

То что криво, тут уж не ругайте, у меня опыта нет

Давайте помогу тогда.

Криво в нём то, что когда мышкой пытаешься двигать контент он возвращается назад, а на следующий раздел не пересвистывается, хотя один раз получилось. Ещё прокрутка роликом маленькая, думаю стоит увеличить до среднего размера картинки.

И вот кнопочка с лева вверху "edgegency" после нажатия страница перезагружается. Со временем если научитесь, советую сделаю либо AJAX + hash history либо просто возвращать в исходное положение страницу, а не перезагружать.

А так красивенько.

[Aroused]

что когда мышкой пытаешься двигать контент он возвращается назад,

Всмысле когда scrollEnd появляется следующий проект? Это не было запланированно =).

хотя один раз получилось.

А вот это уже странно

Ещё прокрутка роликом маленькая, думаю стоит увеличить до среднего размера картинки.

Я именно это и хочу сделать.

И вот кнопочка с лева вверху "edgegency" после нажатия страница перезагружается

Тут и правда беда, у меня навигация страдает, ведь всё по клику происходит .hide.show.load итд итп..

Со временем если научитесь, советую сделаю либо AJAX + hash history либо просто возвращать в исходное положение страницу,

Времени не много, но в будующем нужно будет сделать.

А так красивенько.

Пасиб. Стараемся.

Кстати gif прелоадер для такого фона как на главной вообще не реален наверно, получается нужно canvas и APNG использовать?

Edited August 6, 2011 by Aroused

[Nekromancer]

Всмысле когда scrollEnd появляется следующий проект? Это не было запланированно =).

Ну тогда сделайте, что б хоть не возвращало сразу назад, как до конца прокручиваешь.

А вот это уже странно

Эт я на картинку нажал пытаясь прокрутить, ошибся

П.С. Кстати, заключайте цитаты в цитаты, а не в код)

[Aroused]

код меньше места занимает =) я там спрашивал на счет фона и gif, лучше всё так и apng с таким фоном как на главной?

[Nekromancer]

Всё таки лучше гифку, хотя можете и canvas, если понимаете. Вот можете тут поиграться с выбором лоадера:

http://www.ajaxload.info/

[Aroused]

Всё таки лучше гифку, хотя можете и canvas, если понимаете. Вот можете тут поиграться с выбором лоадера:

Я и javascript не понимаю, но что-то же сделал значит попробую разобраться canvas. Позже фон будет из проекта в проект менятся, gif я попробовал, плавно прозрачность не выходит там либо есть пиксель либо нет = ).

Edited August 6, 2011 by Aroused

[dropoff]

Дабы не создавать похожую тему...

Есть такой простой код

<script type="text/javascript">
$(document).ready(function(){
        jQuery('#counter').load('load.php');

        jQuery("#refresh").click(function(evt)
        {
                jQuery("#counter").load("load.php")
                evt.preventDefault();
        })
});
</script>

Как тут сделать так, чтобы при первой загрузки было плавное появление контента.

При клике на обновить (refresh), чтобы появлялся div в который я бы вставил уже стили для оформления, а после опять плавно появлялся контент.

Будьте добры, подскажите решение.

Edited August 7, 2011 by dropoff

[Aroused]

плавное появление контента

.fadeIn()

.fadeOut()

появлялся div в который я бы вставил уже стили для оформления

В реальном времени?

Edited August 8, 2011 by Aroused

[dropoff]

про fadeIn() я знаю. Я пробовал приделать, но что-то эффекта не заметил. Как я понял нужно после загрузки добавить функцию в которой этот эффект будет(как в первом посте)?

А по поводу обновления... После нажатия refresh - блок с контентом исчезает и появляется картинка, текст, что угодно, загрузчика, типа "подождите" и после повторного получения контента плавно появляется блок.

Может я усложняю все и достаточно будет просто перед обновлением #counter поставить fadeOut(), а после загрузки fadeIn() ?

Я с JS совсем мало знаком и синтаксис для меня пока не очень понятен.