Получите ширину нескольких изображений, хранящихся в DOM

Question

Привет, ребята, у меня проблема с получением ширины нескольких изображений, хранящихся в DOM.

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

<div id="showcase" class="showcase"> 

     <div class="showcase-slide"> 
      <div class="showcase-content"> 
       <img src="https://asp.zone-secure.net/v2/90/10158/58365/multimedia/1_1/1.jpg" alt="02" /> 
      </div> 

     </div> 
     <div class="showcase-slide"> 
      <div class="showcase-content"> 
       <img src="https://asp.zone-secure.net/v2/90/10158/58365/multimedia/1_1/2.jpg" alt="02" /> 
      </div> 

     </div> 
     <div class="showcase-slide"> 
      <div class="showcase-content"> 
       <img src="https://asp.zone-secure.net/v2/90/10158/58365/multimedia/1_1/3.jpg" alt="02" /> 
      </div> 

     </div> 
     <div class="showcase-slide"> 
     <div class="showcase-content"> 
       <img src="https://asp.zone-secure.net/v2/90/10158/58365/multimedia/1_1/4.jpg" alt="02" /> 
      </div> 

     </div> 

Что я пробовал:

for(var i=0; i < mineContor; i++){ 
        var img = $("img")[i]; 
        console.log(img.width); 
       } 

Спецификация: mineContor = 4 (сколько ГИМ у меня есть);

Выпуск:

240 
(3) 0 

Иногда это как выше консоли, где 240 ширина РХ реальная ширина 1-го изображения. Иногда, как рев.

(4) 0 

Даже если console.log(img.src); возвращается на 4 изображения, которые я имею в DOM с правильного пути Src! Кроме того, эти изображения имеют разные размеры.

Вопрос:

Почему ширина 0 и нет?

Answer 1

Написать свой код в $(window).load(function(){});

Это происходит потому, что он выполняет, когда все другие вещи, которые загружены, а также, например, как изображения.

Так что ваш код становится:

$(window).load(function() { 
    for(var i=0; i < mineContor; i++){ 
        var img = $("img")[i]; 
        console.log(img.width); 
       } 
}); 

Answer 2

Попробуйте это: Написать свой код внутри $(function() который будет гарантировать, что все DOM структура готова. Затем повторите все изображения и вызовите метод .width(), который даст вам ширину каждого изображения.

$(function(){ 
    $('#showcase .showcase-content img').each(function(){ 
    console.log($(this).width()); 
    }); 
}); 

JSFiddle Demo

Answer 3

Это потому, что только $("img")[0] возвращает DOM-объект первого элемента изображения, происходящего, с шириной собственности. $("img")[1] и т. Д. Нет. [n] не возвращает следующее возникающее изображение, которое, я считаю, является тем, что вы думали. Кроме того, если вы хотите прокручивать каждое изображение, почему бы не использовать метод $.each() в jQuery?

$('#showcase img').each(function() { 
    console.log($(this).width()); 
}); 

Answer 4

$("img").each(function(){ 

console.log($(this).css("width")); 

    OR 

console.log($(this).width()); 
}); 

Demo

Answer 5

это будет работать лучше?

$.each($('img'), function(index, value){ 
    console.log($(value).width()); 
}); 

https://jsfiddle.net/hz6zvvth/

Answer 6

мне не нравится идея с вашей переменной mineContor.Это не очень гибкое решение. Я хотел бы предложить альтернативное решение без использования JQuery или любой внешней библиотеки:

// get all images (img) on the page 
var images = document.getElementsByTagName('img'); 
// iterate over the images and return the width for every single image 
for (var i = 0; i < images.length; i++) { 
    console.log((i + 1) + '. image has width ' + images[i].width + 'px'); 
} 

Это работает лучше и является более гибким, чем жесткое кодирование количество изображений в переменной.

РЕДАКТИРОВАТЬ:

Приведенный выше код был первоначально означало лишь в качестве дополнения к другим ответам в качестве альтернативы без JQuery и избежать жесткого кодирования переменной mineContor.

Изображения в документе могут считываться только после полной загрузки DOM.

https://developer.mozilla.org/en/docs/Web/API/GlobalEventHandlers/onload

Здесь идет расширение, показывающее, как реализовать пример кода на странице:

var getImageWidth = function() { 
    // declare all variables in the beginning 
    var images, i; 
    // get all images, it returns an HTMLCollection, an array-like object 
    images = document.getElementsByTagName('img'); 
    // iterate over the images and get the width for every one of them 
    console.log((i + 1) + '. image has width ' + images[i].width + 'px'); 
} 

// execute the function after the page has finished loading 
// important: no brackets after the function 
window.onload = getImageWidth; 

Адаптировать тело функции в соответствии с вашими потребностями либо перестановкой выход с console.log или по возвращая значения, возможно, как массив.