Показать сообщение отдельно
  #2 (permalink)  
Старый 14.09.2013, 09:47
Профессор
Отправить личное сообщение для DjDiablo Посмотреть профиль Найти все сообщения от DjDiablo
 
Регистрация: 04.02.2011
Сообщений: 1,815

Во первых
придай классу object фиксированный размер. Благодаря этому все контейнеры для картинок сразу будут стоять на своих местах. Сейчас они у тебя встают по мере загрузки, это не вариант.

.object{
    width:202px;
    height:323px;
}


Теперь что касается картинок.

Один из вариантов дождаться одновременной загрузки всех картинок и только потом показать их
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script>
$(function(){
    var imgs=$('.container img');
    col=0;

    imgs.on('load',function(){      
      col++;
      if (col==imgs.length){

         $('.container').animate({
             opacity:1
         },500);

         $('.wait').hide();
      }
    })
})
</script>
<div class="wait"> LOADING </div>
<div class="container" style="opacity:0;">

    <img src="http://stylish-cherries.ru/netcat_files/10/67/879133_1_t1_t2_4.jpeg"/>

    <img src="http://stylish-cherries.ru/netcat_files/10/67/1026779_1_t1_t2_3.jpeg"/>

    <img src="http://stylish-cherries.ru/netcat_files/10/67/1026781_1_t1_t2_3.jpeg"/>

    <img src="http://stylish-cherries.ru/netcat_files/10/67/1026784_1_t1_t2_2.jpeg"/>
</div>



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

<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script>
$(function(){
    var imgs=$('.container img');
    imgs.css({
      opacity:0
   });

    imgs.on('load',function(){      
         //анимация конечно не обязательна, это так сказать приправа на мой вкус :)
         $(this).animate({
             opacity:1
         },500);
    })
})
</script>

<div class="container">

    <img src="http://stylish-cherries.ru/netcat_files/10/67/879133_1_t1_t2_4.jpeg"/>

    <img src="http://stylish-cherries.ru/netcat_files/10/67/1026779_1_t1_t2_3.jpeg"/>

    <img src="http://stylish-cherries.ru/netcat_files/10/67/1026781_1_t1_t2_3.jpeg"/>

    <img src="http://stylish-cherries.ru/netcat_files/10/67/1026784_1_t1_t2_2.jpeg"/>
</div>
__________________
Лучше калымить в гандурасе чем гандурасить на колыме

Последний раз редактировалось DjDiablo, 14.09.2013 в 10:16.
Ответить с цитированием