Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 13.09.2013, 15:18
Интересующийся
Отправить личное сообщение для raindew Посмотреть профиль Найти все сообщения от raindew
 
Регистрация: 20.11.2011
Сообщений: 25

Картинка при загрузке 10 картинок в блоке
Всем привет!) Столкнулся с проблемой загрузки картинок при открывании страницы. Картинок много, и потому смотрится не очень красиво, когда они загружаются. Вот сайт, где это все собственно и происходит: http://stylish-cherries.ru/catalog/women/ Если вдруг кто сталкивался с подобной ситуацией, прошу помощи. Спасибо!)
Ответить с цитированием
  #2 (permalink)  
Старый 14.09.2013, 08: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 в 09:16.
Ответить с цитированием
  #3 (permalink)  
Старый 14.09.2013, 09:34
Аватар для danik.js
Профессор
Отправить личное сообщение для danik.js Посмотреть профиль Найти все сообщения от danik.js
 
Регистрация: 11.09.2010
Сообщений: 8,804

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

Последний раз редактировалось danik.js, 14.09.2013 в 09:38.
Ответить с цитированием
  #4 (permalink)  
Старый 14.09.2013, 09: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 в 11:10.
Ответить с цитированием
  #5 (permalink)  
Старый 14.09.2013, 11:25
Аватар для danik.js
Профессор
Отправить личное сообщение для danik.js Посмотреть профиль Найти все сообщения от danik.js
 
Регистрация: 11.09.2010
Сообщений: 8,804

Сообщение от DjDiablo
Danik.js сможешь смоделировать ситуацию где картинка загрузится еще до запуска скрипта?
В Opera и IE очень хорошо моделируется когда картинки берутся из кэша
__________________
В личку только с интересными предложениями
Ответить с цитированием
  #6 (permalink)  
Старый 14.09.2013, 11:28
Профессор
Отправить личное сообщение для DjDiablo Посмотреть профиль Найти все сообщения от DjDiablo
 
Регистрация: 04.02.2011
Сообщений: 1,815

В исправленной версии я учел это.
К сожалению не могу на ie сейчас проверить.
__________________
Лучше калымить в гандурасе чем гандурасить на колыме
Ответить с цитированием
  #7 (permalink)  
Старый 14.09.2013, 19:25
Интересующийся
Отправить личное сообщение для raindew Посмотреть профиль Найти все сообщения от raindew
 
Регистрация: 20.11.2011
Сообщений: 25

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



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
смена картинок при нажатии sdff Общие вопросы Javascript 15 08.02.2014 15:08
Скрытие блоков при загрузке страницы nemesiswss Работа 2 15.03.2013 09:13
Автозапуск скрипта при загрузке страницы HepoH Javascript под браузер 3 31.03.2012 21:27
При загрузке страницы не отображается картинка pimax1978 Opera, Safari и др. 10 06.01.2012 21:09
Помогите создать скрипт замены картинок при наведении курсора. SantaS Я не знаю javascript 3 05.06.2009 11:59