Значение, возвращаемое из image.onload (функция() является 0 или не определен

Question

Я стараюсь, чтобы получить высоту/ширину от некоторых фоновых изображений, но как получить эти значения в некоторых переменные

var bgobj = jQuery(this); // assigning the object   
    var url = bgobj.css('background-image').replace(/url\(|\)$|"/ig, ''); 

    var img = new Image(); 

    img.src = url; 

Вариант 1?: .

alert('img.width: ' + img.width); // alert: " img.width: 0 " 

Возможно, изображение не загружается Так что я стараюсь OnLoad: вариант 2:

jQuery(bgimg).on('load', function() { 
      height = jQuery(bgimg).height(); 
      //alert('height ' + height); //'480px' which is correct! 
    }); 

Невозможно получить выгоду для дальнейшего использования !? Поэтому я стараюсь обратного вызова: Вариант 3:

 var imageSize = function(url, callback) { 

      var img = new Image(); 
      img.onload = function(){ 

       var response = {}; 
       var img = new Image(); 
       img.onload = function() { 
        var x = img.width; 
        var y = img.height; 
        var z = y/x; 
        response = {width:x,height:y}; 
        if(callback) callback(response); 
       } 
       img.src = url; 
      }    
      img.onload();    

    } 
    var getSize = function(url, callback) { 
     imageSize(url, function(response) { 
      var dim = response; 
     }) 
     callback(dim); 
    } 
    var h; 
    imageSize(img.src, function(response) { 
      h=response.height; 
      //alert(h); // 800px (OK)) 
    }) 
    //alert(h); //undefined  
    //alert(imageSize.height); //undefined 
    //alert(imageSize.h); //undefined 
    //alert(imageSize.response.h); //undefined 

Все еще не способ получить значение в обычной переменной. Где я ошибся?

Answer 1

Вы слишком усложнили его, но вариант 3 - один способ сделать это.

var imageSize = function(url, callback) { 
 
    var img = new Image(); 
 
    img.onload = function(){   
 
     if(callback) callback(img.width,img.height);  
 
    } 
 
    img.src = url;  
 
} 
 

 
$(function(){ 
 
    var url = $('#foo').css('background-image').replace(/url\(|\)$|"/ig, ''); 
 
    imageSize(url,function(w,h){ 
 
     alert("width=" + w + ", height=" + h); 
 
    }) 
 
});

#foo{ 
 
    background-image:url(http://lorempixel.com/100/100/) 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="foo">test</div>

Важно помнить, что метод imageSize является асинхронным, так что вы должны передать его обратного вызова, которая будет вызвана, когда изображение загружается. У вас нет другого метода, когда вы рассматриваете его как синхронный вызов, который просто не работает.