Содержимое загружается после обновления страницы, такое бывает?

Question

[weare138]

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

html

<div class="gallery-description">
          <div style="width:200px; height:150px;" class="demoItem">
          <img class="cover" src="/gallery/alfa/alfa2"/>
         </div>
            <div style="width:200px; height:150px;" class="demoItem">
            <img class="cover" src="/gallery/alfa/alfa3"/>
         </div>
            <div style="width:200px; height:150px;" class="demoItem">
            <img class="cover" src="/gallery/alfa/alfa4"/>
         </div>
            <div style="width:200px; height:150px;" class="demoItem">
            <img class="cover" src="/gallery/alfa/alfa5"/>
         </div>
            <div style="width:200px; height:150px;" class="demoItem">
            <img class="cover" src="/gallery/alfa/alfa6"/>
         </div>
         <div style="width:200px; height:150px;" class="demoItem">
            <img class="cover" src="/gallery/alfa/alfa7"/>
         </div>
         <div style="width:200px; height:150px;" class="demoItem">
            <img class="cover" src="/gallery/alfa/alfa8"/>
         </div>
         <div style="width:200px; height:150px;" class="demoItem">
            <img class="cover" src="/gallery/alfa/alfa9"/>
         </div>
         <div style="width:200px; height:150px;" class="demoItem">
            <img class="cover" src="/gallery/alfa/alfa10"/>
         </div>
      </div>

css

.gallery-description {
	width: 100%;
	height: 25%;
}
.demoItem {
    margin-right: 10px;
    margin-bottom: 10px;
}
.cover {
	opacity:0;
}
.coverParent {
	position:relative;
	float: left;
}

Плагин jquery masscode.ru/index.php/k2/item/45-lifullsize

Answer 1

[Андрей Ежгуров]

У тебя плагин срабатывает до того, как загрузились картинки. Потому он не может определить их размер. А после перезагрузки страницы картинки берутся из кеша и их размер он к моменту работы уже знает.

Вариантов решения 3:

1. В каждом теге img прописать реальные width и height картинок:

<div style="width:200px; height:150px;" class="demoItem">
  <img class="cover" src="/gallery/alfa/alfa3" style="width:56px; height:507px;" / >
</div>

2. Запускать плагин по событию onload:

$(function(){
  $(window).load(function(){
    $('.cover').плагин();
  });
});

Как вариант, можно повесть плагин не на загрузку страницы в целом, а на окончание загрузки каждой из картинок:

$(function(){
  $('.cover').load(function(){
    $(this).плагин();
  });
});

3. Не париться с тегом img, а использовать картинку как фон с масштабированием:
CSS:

.demoItem {
  background-size: cover;
}

HTML:

<div style="width:200px; height:150px; background-image: url(/gallery/alfa/alfa3);" class="demoItem"></div>

Comments

[weare138]

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

[Андрей Ежгуров]

Нет, не так. Картинки ставятся в очередь загрузки как только парсер добирается до их адресов. Сама загрузка идёт в несколько потоков. Потому картинки заканчивают загружаться обычно существенно позже, чем основной контент страницы.

Это проще увидеть - нажав F12 и посмотрев график загрузки компонентов на соответствующей вкладке отладчика браузера.

[weare138]

Блин, а я всегда думал что все по очереди.Спасибо, буду знать

Answer 2

[Александр Маджугин]

/gallery/alfa/alfa10/ - вот это вот ссылки на файлы изображений у вас или это какие-то указатели для плагина?

Comments

[weare138]

ссылки на изображения

[Александр Маджугин]

weare138: Тогда вариант один - описанный eandr_67
Загрузка картинок происходит позже чем стартует скрипт. Правильный выход №3

[weare138]

Suntechnic: я выбрал вариант №2 :)