Есть ли способ считывать "естественную ширину" изображения с помощью jquery?

Ответ 1

$this.css('height', 'auto');
var height = $this.height();

Ответ 2

Я использую собственные атрибуты javascript

.naturalWidth/.naturalHeight

В объекте jQuery я использую

var width = $(this).get(0).naturalWidth; 
var height = $(this).get(0).naturalHeight;

или

var width = $("selector").get(0).naturalWidth; 
var height = $("selector").get(0).naturalHeight;

если не выбран объект jQuery.

С помощью get (0) в объекте jQuery вы можете получить доступ к связанному DOM-элементу. На встроенном элементе DOM вы можете работать с собственным кодом JavaScript (здесь доступен атрибут nativ javascript.naturalWidth)

Ответ 3

Мне кажется, что принятое решение изменяет внешний вид объекта. Иногда jQuery слишком полезна, и вы должны сказать, чтобы он ушел с вашего пути. Если вы хотите использовать naturalWidth или naturalHeight, просто используйте тот, который уже существует, путем преобразования объекта jQuery в ссылку на собственный элемент браузера.

var Height = document.getElementById($(this).attr("id")).naturalHeight;

Ответ 4

Один из способов получить размеры изображения - динамически загружать копию изображения с помощью javascript и получать его размеры:

// preload the image
var height, width = '';
var img = new Image();
var imgSrc = '/path/to/image.jpg';

$(img).load(function () {
    alert('height: ' + img.height);
    alert('width: ' + img.width);
    // garbage collect img
    delete img;
}).error(function () {
    // image couldnt be loaded
    alert('An error occurred and your image could not be loaded.  Please try again.');
}).attr({ src: imgSrc });

Ответ 5

Вот пример функции jQuery, которая работает с более старыми версиями IE даже для больших изображений.

/*
 * NaturalWith calculation function. It has to be async, because sometimes(e.g. for IE) it needs to wait for already cached image to load.
 * @param onNaturalWidthDefined callback(img) to be notified when naturalWidth is determined.
 */
jQuery.fn.calculateNaturalWidth = function(onNaturalWidthDefined) {
    var img = this[0];
    var naturalWidth = img.naturalWidth;
    if (naturalWidth) {
        onNaturalWidthDefined(img);
    } else { //No naturalWidth attribute in IE<9 - calculate it manually.
        var newImg = new Image();
        newImg.src = img.src;
        //Wait for image to load
        if (newImg.complete) {
            img.naturalWidth = newImg.width;
            onNaturalWidthDefined(img);
        } else {
            $(newImg).load(function() {img.naturalWidth=newImg.width; onNaturalWidthDefined(img)});
        }
    }
};

Использование прост:

$(img).calculateNaturalWidth(function(img) { alert(img.naturalWidth)});

Ответ 6

Лучшее, что вы можете сделать, это скрыть изображение без установки ширины и высоты и использовать источник изображения для этого изображения в качестве исходного изображения. Затем вычислите размер этого скрытого изображения.

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

Ответ 7

Просто попробовал

var width = $("img", this).css('width', 'auto').width();
var height= $("img", this).css('height', 'auto').height();

Является в основном вычислением для naturalWidth и naturalHeight в любом случае

Ответ 8

Источник ЗДЕСЬ

Вот небольшой плагин jQuery (любая версия), который добавляет два метода: naturalWidth() и naturalHeight(). Он использует ветвление, чтобы определить, поддерживаются ли naturalWidth и naturalHeight браузером. Если поддерживается, метод просто становится геттером для свойства naturalWidth или naturalHeight. Если этот метод не поддерживается, метод создает новый элемент нестационарного изображения и возвращает фактическую ширину и высоту этого элемента.

  // adds .naturalWidth() and .naturalHeight() methods to jQuery
  // for retreaving a normalized naturalWidth and naturalHeight.
  (function($){
    var
    props = ['Width', 'Height'],
    prop;

    while (prop = props.pop()) {
    (function (natural, prop) {
      $.fn[natural] = (natural in new Image()) ? 
      function () {
      return this[0][natural];
      } : 
      function () {
      var 
      node = this[0],
      img,
      value;

      if (node.tagName.toLowerCase() === 'img') {
        img = new Image();
        img.src = node.src,
        value = img[prop];
      }
      return value;
      };
    }('natural' + prop, prop.toLowerCase()));
    }
  }(jQuery));

  // Example usage:
  var 
  nWidth = $('img#example').naturalWidth(),
  nHeight = $('img#example').naturalHeight();