Картинка при загрузке 10 картинок в блоке

[raindew]

Всем привет!) Столкнулся с проблемой загрузки картинок при открывании страницы. Картинок много, и потому смотрится не очень красиво, когда они загружаются. Вот сайт, где это все собственно и происходит: http://stylish-cherries.ru/catalog/women/ Если вдруг кто сталкивался с подобной ситуацией, прошу помощи. Спасибо!)

[DjDiablo]

Во первых
придай классу 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>

[danik.js]

Один из вариантов дождаться одновременной загрузки всех картинок и только потом показать их

Вариант хреновый. А уж реализация тем более. Что если какая-то картинка загрузится еще до запуска скрипта?
Последовательная отрисовка загруженной части картинки - уже сама по себе индикация загрузки.
Мое мнение что достаточно прописать размеры и мудрить ничего не надо. Lazy load - тоже хорошая фишка, но имеет ряд недостатков, да и в реализации по-сложнее, так что такой вариант тоже под вопросом.

[DjDiablo]

Для одновременной нужно предусмотреть еще случай если картинка не может быть загружена. Хотя мне кажется если уж анимировать загрузку то поштучно будет лучше.

Danik.js сможешь смоделировать ситуацию где картинка загрузится еще до запуска скрипта?

На всякий случай выкладываю код умеющий проверять загружена ли картинка.

function isImageLoaded(img) {
            // Во время события load IE и другие браузеры правильно
            // определяют состояние картинки через атрибут complete.
            // Исключение составляют Gecko-based браузеры.
            if (!img.complete) {
                return false;
            }
            //Gecko браузеры
            // Если картинка еще не загрузилась то img.naturalWidth  равен нулю
            if (typeof img.naturalWidth !== "undefined" && img.naturalWidth === 0) {
                return false;
            }
            // Картинка загружена.
            return true;
        }

Тогда c учетом замечания danik скрипт будет выглядеть как то так.
Если скрипт будет во внешнем файле и загрузится позже картинок, то анимация будет все равно корректной.
Единственное что картинки следует спрятать заранее при помощи CSS стиля, иначе могут успеть прорисоваться на долю секунды, мигнуть другими словами.

<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<style>
   .container img{
     opacity:0;
   }
</style>
<script>
$(function(){
  
  function isImageLoaded(img) {
            // Во время события load IE и другие браузеры правильно
            // определяют состояние картинки через атрибут complete.
            // Исключение составляют Gecko-based браузеры.
            if (!img.complete) {
                return false;
            }
            //Gecko браузеры
            // Если картинка еще не загрузилась то img.naturalWidth  равен нулю
            if (typeof img.naturalWidth !== "undefined" && img.naturalWidth === 0) {
                return false;
            }
            // Картинка загружена.
            return true;
        }
  
  function show(img){
          $(img).animate({
             opacity:1
         },500);
  
  }    
  
    $('.container img').each(function(){
      if( isImageLoaded(this)){
         show(this);
      } else {
         $(this).on('load',function(){       
             show(this);
         })
      }
    })    
})
</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>

[danik.js]

Danik.js сможешь смоделировать ситуацию где картинка загрузится еще до запуска скрипта?

В Opera и IE очень хорошо моделируется когда картинки берутся из кэша

[DjDiablo]

В исправленной версии я учел это.
К сожалению не могу на ie сейчас проверить.

[raindew]

DjDiablo, Спасибо огромное! Все работает) Но вот может Вы видите то же, что и я. Когда заходим на страничку:http://stylish-cherries.ru/catalog/women/ то 2-ая фотка почему-то не сразу хочет грузится, хотя после 3-ей все загружается. Использую Google Chrome. в остальных браузерах все нормально.