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

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

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>
__________________
Лучше калымить в гандурасе чем гандурасить на колыме

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