Erste Bildbreite auf dem Bild Last nicht auf IE

Question

Ich habe ein Image Resizer-Funktion, dass Resize Bilder proportional. Auf jedem Bild einen Anruf Um diese Funktion mit Bild laden und die Größe, wenn seine Breite oder Höhe größer als meine maximale Breite und max Höhe. Ich kann img.width und img.height in FF Chrome Opera Safari bekommen, aber IE versagt. Wie kann ich damit umgehen?

Lassen Sie mich mit einem Stück Code zu erklären.

<img src="images/img01.png" onload="window.onImageLoad(this, 120, 120)" />

function onImageLoad(img, maxWidth, maxHeight) {
     var width = img.width; // Problem is in here
     var height = img.height // Problem is in here
}

In meiner highligted Linie img.width auf IE-Serie nicht arbeiten.

Jeder Vorschlag?

Danke.

Answer 1

Verwenden Sie width und height nicht. Verwenden Sie naturalWidth und naturalHeight statt. Diese liefern die Bild unscaled Pixelabmessungen von der Bilddatei und wird in allen Browsern funktionieren.

Answer 2

Man, ich war für 2 Tage für diese suchen. Danke.

Ich bin mit jQuery, aber es spielt keine Rolle. Das Problem ist im Zusammenhang mit JavaScript im Internet Explorer.

Mein bisheriger Code:

var parentItem = $('<div/>')
   .hide();      // sets display to 'none'

var childImage = $('<img/>')
   .attr("src", src)
   .appendTo(parentItem)   // sets parent to image
   .load(function(){
      alert(this.width);  // at this point image is not displayed, because parents display parameter is set to 'none' - IE gives you value '0'
   });

Dies funktioniert in FF, Opera und Safari, aber keine IE. Ich war immer '0' im Internet Explorer.

Behelfslösung für mich:

var parentItem = $('<div/>')
   .hide();

var childImage = $('<img/>')
   .attr("src", src)
   .load(function(){
      alert(this.width);  // at this point image css display is NOT 'none'  - IE gives you correct value
      childImage.appendTo(parentItem);   // sets parent to image
   });

Answer 3

Dies ist, wie ich es gelöst (weil es die einzige js auf der Seite, die ich nicht wollte, dass eine Bibliothek verwenden).

    var imageElement = document.createElement('img');
    imageElement.src = el.href; // taken from a link cuz I want it to work even with no script
    imageElement.style.display      = 'none';

    var imageLoader = new Image();
    imageLoader.src = el.href;
    imageLoader.onload = function() {
        loaderElement.parentElement.removeChild(loaderElement);
        imageElement.style.position     = 'absolute';
        imageElement.style.top          = '50%';
        imageElement.style.left         = '50%';
        // here using the imageLoaders size instead of the imageElement..
        imageElement.style.marginTop    = '-' + (parseInt(imageLoader.height) / 2) + 'px';
        imageElement.style.marginLeft   = '-' + (parseInt(imageLoader.width) / 2) + 'px';
        imageElement.style.display      = 'block';
    }

Answer 4

Es ist, weil IE kann nicht berechnen Breite und Höhe des display: none Bilder. Verwenden visibility: hidden statt.

Answer 5

Versuchen

 function onImageLoad(img, maxWidth, maxHeight) {
   var width = img.width; // Problem is in here
   var height = img.height // Problem is in here
   if (height==0  && img.complete){
       setTimeOut(function(){onImageLoad(img, maxWidth, maxHeight);},50);
   }

 }

Answer 6

    var screenW = screen.width;
    var screenH = screen.height;
    //alert( screenW );
    function checkFotoWidth( img, maxw )
    {
        if( maxw==undefined)
            maxw = 200;
        var imgW = GetImageWidth(img.src);
        var imgH = GetImageHeight(img.src);
            //alert(GetImageWidth(img.src).toString()); // img.width); // objToString(img));
        if (imgW > maxw || (img.style.cursor == "hand" && imgW == maxw))
        {
            if (imgW > screenW) winW = screenW;
            else winW = imgW;

            if (imgH > screenH) winH = screenH;
            else winH = imgH;

            img.width=maxw;
            img.style.cursor = "pointer";

            img.WinW = winW;
            img.WinH = winH;
            //alert("winW : " + img.WinW);
            img.onclick = function() { openCenteredWindow("Dialogs/ZoomWin.aspx?img=" + this.src, this.WinW, this.WinH, '', 'resizable=1'); }
            img.alt = "Klik voor een uitvergroting :: click to enlarge :: klicken Sie um das Bild zu vergrössern";
            //alert("adding onclick);
        }
    }

    function GetImageWidth(imgSrc) 
    {
        var img = new Image();
        img.src = imgSrc;
        return img.width;
    } 

    function GetImageHeight(imgSrc) 
    {
        var img = new Image();
        img.src = imgSrc;
        return img.height;
    } 

Answer 7

Ich würde versuchen, diese:

function onImageLoad(img, maxWidth, maxHeight) {
   var width, height;
   if ('currentStyle' in img) {
     width = img.currentStyle.width;
     height = img.currentStyle.height;
   }
   else {
     width = img.width;
     height = img.height;
   }
   // whatever
}

Bearbeiten - und offenbar, wenn ich versuche, dass ich lernen würde es nicht funktioniert :-) OK, gut „Breite“ und „Höhe“ scheint definitiv Attribute <img> Elemente zu sein soweit IE betrifft. Vielleicht ist das Problem, dass das „load“ -Ereignis für das Element zur falschen Zeit feuert. Um zu überprüfen, ob das der Fall ist, würde ich dann versuchen Sie dies:

function onImageLoad(img, maxWidth, maxHeight) {
   var width, height;
   var i = new Image();
   i.onload = function() {
     width = i.width; height = i.height;
     // ... stuff you want to do ...
   };
   i.src = img.href;
}

Answer 8

getDisplay().getImage().setUrl(imgURL);
final Image img = new Image(imgURL);
int w=img.getWidth();
int h=img.getHeight();