A ka ndonjë mënyrë për të lexuar gjerësinë natyrale të një imazhi me jquery?

Unë përdor vetitë vendase të javascript pas aplikimit të jQuery dhe më pas heqjes së jQuery

.Gjerësia natyrore / .lartësia natyrore

Në një objekt jQuery që përdor

var width = this.naturalWidth; 
var height = this.naturalHeight;

or

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

nëse nuk zgjidhet asnjë objekt jQuery.

Me get(0) në një objekt jQuery ju mund të përdorni DOM-in e lidhur element. Në elementin vendas DOM mund të punoni me kodin vendas javascript (këtu hyni në atributin nativ javascript .naturalWidth)

Më duket sikur zgjidhja e pranuar modifikon pamjen e objektit. Herë pas here, jQuery është paksa shumë i dobishëm dhe ju duhet t'i tregoni që të largohet nga rruga juaj. Nëse dëshironi të përdorni naturalWidth ose naturalHeight, atëherë thjesht përdorni atë që ekziston tashmë duke e kthyer objektin jQuery në një referencë të elementit vendas të shfletuesit.

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

Një mënyrë për të marrë dimensionet e një imazhi është të ngarkoni në mënyrë dinamike një kopje të imazhit duke përdorur javascript dhe të merrni përmasat e tij:

// 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 });

Këtu është një shembull i një funksioni jQuery i cili funksionon në versionet më të vjetra të IE edhe për imazhe të mëdha.

/*
 * 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)});
        }
    }
};

Përdorimi është i thjeshtë:

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

Më e mira që mund të bëni është të fshehni një imazh pa vendosur gjerësinë dhe lartësinë dhe të përdorni burimin e imazhit për këtë imazh si imazhin tuaj origjinal. Pastaj llogarisni dimensionin e këtij imazhi të fshehur.

Përndryshe, mund të llogarisni dimensionin fizik në anën e serverit dhe ta kaloni atë në një element të fshehur në faqe dhe të merrni madhësinë nga vlera e atij elementi të fshehur.

Thjesht do të provoja

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

Në thelb është llogaritja për naturalWidth dhe naturalHeight gjithsesi

Burimi Nga KETU

Këtu është një shtojcë e shkurtër jQuery (çdo version) që shton dy metoda: naturalWidth () dhe naturalHeight (). Ai përdor degëzim për të përcaktuar nëse gjerësia natyrale dhe lartësia natyrale mbështeten nga shfletuesi. Nëse mbështetet, metoda thjesht bëhet një marrës për vetinë naturalWidth ose naturalHeight. Nëse nuk mbështetet, metoda krijon një element të ri imazhi të pa stiluar dhe kthen gjerësinë dhe lartësinë aktuale të atij elementi.

  // 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();