Safari, Chrome запускает код в window.load, прежде чем страница загружена

Question

У меня есть некоторые HTML, который выглядит следующим образом:

<div class="nmMap-wrapper"> 
     <div id="draggable" class="nmMap-image"> 
      <div class="nmMap"></div> 
     </div> 
</div> 

и на "nmMap" У меня есть фоновое изображение, установленное в CSS.

У меня есть javascript, загружающий фоновое изображение, добавляя его в качестве изображения, а затем получая ширину и высоту и предупреждая все переменные diffirent.

Сценарий выглядит следующим образом:

jQuery(window).load(function($) { 
sceneConstructor(); 
}); 

function sceneConstructor() { 

    var bgHeight; 
    var bgWidth; 
    var bgAspectRatio; 

    function init() { 

     getBgSize(); 
     alertRatio(); 

    } 

    function getBgSize() { 

     var bgsrc = jQuery('.nmMap').css('background-image') 
      .replace('url("', '') 
      .replace('url(', '') 
      .replace('")', '') 
      .replace(')', '') 
      .replace('"', '') 
      .replace("'", ''); 

     var bgImg = jQuery('<img />'); 

     //bgImg.hide(); 

     jQuery('.nmMap').append(bgImg); 

     bgImg.attr('src', bgsrc); 

     bgImg.bind('load', function() { 
      var width = jQuery(this).width(); 
      var height = jQuery(this).height(); 
      alert('first height' + height); 
      setAspectRatio(width, height); 
     }); 

    } 

    function setAspectRatio(width, height) { 
     alert('second height: ' + height); 
     bgHeight = height; 
     bgWidth = width; 
     bgAspectRatio = bgWidth/bgHeight; 
     alert('trejde: ' + bgHeight); 
     jQuery('.nmMap').addClass('ration'); 
    } 

    function alertRatio() { 
     alert('bgheight ' + bgHeight); 
     alert('bgwidth ' + bgWidth); 
     alert('bgheight ' + bgHeight); 
     alert('bgaspect ' + bgAspectRatio); 
    } 

    init(); 

} 

Все это работает в Firefox, за исключением того, что всегда получает неопределенными первое предупреждение в alertRatio(). Но в сафари, хром и IE, это как alertRaiom() выполняется первым, и из-за этого все предупреждения не определены.

Может кто-нибудь помочь и рассказать мне, что происходит?

Answer 1

попробуйте установить по умолчанию .ready из jquery.

Загрузка этого кода после загрузки dom.

jQuery(document).ready(function() { 
sceneConstructor(); 
}): 

вы также можете

jQuery(window).ready(function() { 
sceneConstructor(); 
}): 

Источник: https://api.jquery.com/ready/

Answer 2

Поможет, если вы bind() слушатель событий, прежде чем установить атрибут изображения в src?