Javascript-форум (https://javascript.ru/forum/)
-   Общие вопросы Javascript (https://javascript.ru/forum/misc/)
-   -   Помогите понять "глюк" (https://javascript.ru/forum/misc/43535-pomogite-ponyat-glyuk.html)

Faab 09.12.2013 21:30

Помогите понять "глюк"
 
$(document).ready(function() {
  var eImg0 = document.querySelectorAll(".b-slider-img-container--img")[0];
  var oImg0Style = window.getComputedStyle(eImg0);
  var iImg0Width = parseInt(oImg0Style.getPropertyValue('width'));
  var iImg0Height = parseInt(oImg0Style.getPropertyValue('height'));
  console.log('iImg0Width = ' + iImg0Width);
}


При верстании (на локалке) у меня через раз выходит iImg0Width = 0.. Это начинает очень бесить и , вдруг, такие сюрпризы будут всплывать и на сервере? Почему проскакивает такая ширина? Не успевает загружается в DOM?

danik.js 09.12.2013 22:14

Цитата:

Сообщение от Faab
Не успевает загружается в DOM?

DOM не причем. Просто не успевает загружаться.
Проверяй свойство eImg0.complete, и если оно false, то вешай обработчик onload и замеры делай уже в callback'е.
Ширину картинки можно получить проще (если картинки видимы):
img.offsetWidth
Но она включает в себя также border-width

рони 09.12.2013 22:20

Faab,
или не $(document).ready а $(window).load

danik.js 09.12.2013 22:31

рони, блин, хотел же написать, но пока разбирался с шириной - забыл :))

Faab 09.12.2013 23:07

Цитата:

Сообщение от рони (Сообщение 285667)
Faab,
или не $(document).ready а $(window).load

Цитата:

Сообщение от danik.js (Сообщение 285668)
Faab,
рони, блин, хотел же написать, но пока разбирался с шириной - забыл )

А в чём заключается принципиальность использования $(window).load? Я думал это, выражаясь мягко, синонимы.

Faab 09.12.2013 23:15

Цитата:

Сообщение от danik.js (Сообщение 285663)
DOM не причем. Просто не успевает загружаться.
Проверяй свойство eImg0.complete, и если оно false, то вешай обработчик onload и замеры делай уже в callback'е.
Ширину картинки можно получить проще (если картинки видимы):
img.offsetWidth
Но она включает в себя также border-width

danik.js, я никогда не вешал колбеки на load().. я тут настрочил ерунду какую-то.. примерно такое ты имел в виду?

$(window).load(){
  var eImg0 = document.querySelectorAll(".b-slider-img-container--img")[0];
  if(eImg0.complete){
    var oImg0Style = window.getComputedStyle(eImg0);
    var iImg0Width = parseInt(oImg0Style.getPropertyValue('width'));
    var iImg0Height = parseInt(oImg0Style.getPropertyValue('height'));
    console.log('iImg0Width = ' + iImg0Width);
  }else{
    eImg0.load(null;null;funtion(){
      var oImg0Style = window.getComputedStyle(eImg0);
      var iImg0Width = parseInt(oImg0Style.getPropertyValue('width'));
      var iImg0Height = parseInt(oImg0Style.getPropertyValue('height'));
      console.log('iImg0Width = ' + iImg0Width);
    }){};
  };
};

animhotep 10.12.2013 11:52

Цитата:

Сообщение от Faab
А в чём заключается принципиальность использования $(window).load?

http://api.jquery.com/load-event/
Цитата:

Run a function when the page is fully loaded including graphics.

danik.js 10.12.2013 12:55

Faab, нужно использовать либо $(window).load либо $(document).ready + $(img).load

$(window).load + $(img).load вариант лишен смысла.

Faab 10.12.2013 14:44

Спасибо. Разница оказывается большая. Я так понимаю ready создана лишь для того что бы экономить время там, где работа скрипта не связана напрямую с изображениями?


Часовой пояс GMT +3, время: 09:55.