JavaScript Image() ширина возвращает 0

Question

Мне нужно, чтобы ширина и высота изображения с экрана:. Никто и я не получаю и ширину и высоту 0. вот мой код:

for (i = 0; i <= slideCount; ++i) { 
      imgPath = slideshow.eq(i).attr("src"); 
      imgEle = new Image(); 
      imgEle.src = imgPath; 

      imgEle.addEventListener("load", function() { 
       imgSize = [imgEle.width, imgEle.height]; 
       if ((imgSize[0]/imgSize[1]) > (boxSize[0]/boxSize[1])) { 
        slideshow.eq(i).css("height", "100%"); 
       } 
       else { 
        slideshow.eq(i).css("width", "100%"); 
       } 
      }); 
     } 

Я попытался onload = funcion() {} а также не проверять, загружен ли образ, но тем не менее я получаю ширину и высоту как 0. Более того, когда я запускал консоль в Chrome и ссылался на те поля, у меня были правильные значения.

Answer 1

Это связано с неправильным использованием переменной закрытия в цикле, когда выполняется обработчик нагрузки, переменная imgEle относится к последней ссылке на объект изображения, а не к той, на которой было вызвано событие загрузки, поэтому, когда первый элемент загружается последний элемент не может быть загружен так imgEle.width/imgEle.height возвратит 0

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

с что я вижу, то, что вам нужно, это

slideshow.each(function() { 
    var $this = $(this); 
    var imgPath = $this.attr("src"); 
    var imgEle = new Image(); 
    imgEle.src = imgPath; 

    imgEle.addEventListener("load", function() { 
     var imgSize = [this.width, this.height]; 
     if ((imgSize[0]/imgSize[1]) > (boxSize[0]/boxSize[1])) { 
      $this.css("height", "100%"); 
     } else { 
      $this.css("width", "100%"); 
     } 
    }); 
}) 

Примечание: индекс массива работает от 0...length-1 поэтому ваш цикл условие <= slideCount;, возможно, придется relooked в

Answer 2

imgEle переписывается каждый раз, когда ваш запускает цикл. Оберните анонимную функцию вокруг нее, чтобы предотвратить эту проблему.

for(var i = 0; i <= slideCount; ++i) { 
    (function(i){ 
     var imgPath = slideshow.eq(i).attr("src"); 
     var imgEle = new Image(); 
     imgEle.src = imgPath; 

     imgEle.addEventListener("load", function() { 
      imgSize = [imgEle.width, imgEle.height]; 
      if ((imgSize[0]/imgSize[1]) > (boxSize[0]/boxSize[1])) { 
       slideshow.eq(i).css("height", "100%"); 
      } 
      else { 
       slideshow.eq(i).css("width", "100%"); 
      } 
     }); 
    })(i); 
}