Я создаю плагин jQuery.

Как получить реальную ширину и высоту изображения с помощью Javascript в Safari?

Следующие работы с Firefox 3, IE7 и Opera 9:

var pic = $("img")

// need to remove these in of case img-element has set width and height
pic.removeAttr("width"); 
pic.removeAttr("height");

var pic_real_width = pic.width();
var pic_real_height = pic.height();

Но в браузерах Webkit, таких как Safari и Google Chrome, значения равны 0.

Браузеры Webkit устанавливают свойство высоты и ширины после загрузки изображения. Вместо использования тайм-аутов я бы рекомендовал использовать событие загрузки изображения. Вот краткий пример:

var img = $("img")[0]; // Get my img elem
var pic_real_width, pic_real_height;
$("<img/>") // Make in memory copy of image to avoid css issues
    .attr("src", $(img).attr("src"))
    .load(function() {
        pic_real_width = this.width;   // Note: $(this).width() will not
        pic_real_height = this.height; // work for in memory images.
    });

Чтобы избежать какого-либо влияния CSS на размеры изображения, приведенный выше код создает копию изображения в памяти. Это очень умное решение, предложенное атрибутами FDisk Глядя на вывод

Вы также можете использовать naturalHeight и naturalWidth HTML5.

Используйте атрибуты naturalHeight и naturalWidth из HTML5 Глядя на вывод

Также смотрите

var h = document.querySelector('img').naturalHeight;

Работает в IE9, Chrome, Firefox, Safari и Opera ( Шаг 1) Добавьте ссылку COM в своем проекте в библиотеку объектов Microsoft HTML ).


function getOriginalWidthOfImg(img_element) {
    var t = new Image();
    t.src = (img_element.getAttribute ? img_element.getAttribute("src") : false) || img_element.src;
    return t.width;
}

Вам не нужно удалять стиль из атрибутов изображения или размеров изображения. Просто создайте элемент с помощью JavaScript и получите ширину созданного объекта.

Основная проблема заключается в том, что браузеры WebKit (Safari и Chrome) загружают информацию JavaScript и CSS параллельно. Таким образом, JavaScript может выполняться до того, как будут вычислены эффекты стиля CSS, возвращая неправильный ответ. В jQuery я обнаружил, что решение состоит в том, чтобы подождать, пока document.readyState == ‘complete’, .eg,

jQuery(document).ready(function(){
  if (jQuery.browser.safari && document.readyState != "complete"){
    //console.info('ready...');
    setTimeout( arguments.callee, 100 );
    return;
  } 
  ... (rest of function) 

Что касается ширины и высоты … в зависимости от того, что вы делаете, вы можете захотеть offsetWidth и offsetHeight, который включает в себя такие вещи, как границы и отступы.

Существует много дискуссий в принятом ответе о проблеме, где onload http://jsfiddle.net/boldewyn/2b6d5/

В моем случае onload срабатывает для кэшированных изображений, но высота и ширина по-прежнему равны 0 Простое setTimeout решил проблему для me:

$("img").one("load", function(){
    var img = this;
    setTimeout(function(){
        // do something based on img.width and/or img.height
    }, 0);
});

, я не могу сказать, почему происходит событие onload, даже когда изображение загружается из кэша (imp продвижение jQuery 1.4 / 1.5?) — но если вы все еще испытываете эту проблему, возможно, подойдет комбинация из моего ответа и техники var src = img.src; img.src = ""; img.src = src;.

(Обратите внимание, что для моих целей меня не интересуют предварительно определенные измерения, как в атрибутах изображения, так и в стилях CSS — но вы можете удалить их, как указано в ответе Хави. Или клонировать изображение.) { *} это работает для меня (safari 3.2), стреляя изнутри

. Вы можете программно получить изображение и проверить размеры, используя Javascript, без необходимости вообще связываться с DOM. window.onload:

$(window).load(function() {
  var pic = $('img');

  pic.removeAttr("width"); 
  pic.removeAttr("height");

  alert( pic.width() );
  alert( pic.height() );
});

А как насчет

var img = new Image();
img.onload = function() {
  console.log(this.width   'x'   this.height);
}
img.src = 'http://www.google.com/intl/en_ALL/images/logo.gif';

свойств? image.naturalHeight и image.naturalWidth Кажется, хорошо работает довольно много версий в Chrome, Safari и Firefox, но не совсем в IE8 или даже IE9.

Как мы получаем правильные реальные размеры без мерцания реального изображения:

Это работает с & Lt ; img class = «toreaddimensions» …

(function( $ ){
   $.fn.getDimensions=function(){
         alert("First example:This works only for HTML code without CSS width/height definition.");
         w=$(this, 'img')[0].width;
         h=$(this, 'img')[0].height;

         alert("This is a width/height on your monitor: "   $(this, 'img')[0].width "/" $(this, 'img')[0].height);

         //This is bad practice - it shows on your monitor
         $(this, 'img')[0].removeAttribute( "width" );
         $(this, 'img')[0].removeAttribute( "height" );
         alert("This is a bad effect of view after attributes removing, but we get right dimensions: "   $(this, 'img')[0].width "/" $(this, 'img')[0].height);
         //I'am going to repare it
         $(this, 'img')[0].width=w;
         $(this, 'img')[0].height=h;
         //This is a good practice - it doesn't show on your monitor
         ku=$(this, 'img').clone(); //We will work with a clone
         ku.attr( "id","mnbv1lk87jhy0utrd" );//Markup clone for a final removing
         ku[0].removeAttribute( "width" );
         ku[0].removeAttribute( "height" );
         //Now we still get 0
         alert("There are still 0 before a clone appending to document: "  $(ku)[0].width "/" $(ku)[0].height);
         //Hide a clone
         ku.css({"visibility" : "hidden",'position':'absolute','left':'-9999px'}); 
         //A clone appending
         $(document.body).append (ku[0]);
         alert("We get right dimensions: "  $(ku)[0].width "/" $(ku)[0].height);
         //Remove a clone
         $("#mnbv1lk87jhy0utrd").remove();

         //But a next resolution is the best of all. It works in case of CSS definition of dimensions as well.
         alert("But if you want to read real dimensions for image with CSS class definition outside of img element, you can't do it with a clone of image. Clone method is working with CSS dimensions, a clone has dimensions as well as in CSS class. That's why you have to work with a new img element.");
         imgcopy=$('<img src="'  $(this, 'img').attr('src')  '" />');//new object 
         imgcopy.attr( "id","mnbv1lk87jhy0aaa" );//Markup for a final removing
         imgcopy.css({"visibility" : "hidden",'position':'absolute','left':'-9999px'});//hide copy 
         $(document.body).append (imgcopy);//append to document 
         alert("We get right dimensions: "  imgcopy.width() "/" imgcopy.height());
         $("#mnbv1lk87jhy0aaa").remove();


   }
})( jQuery );

$(document).ready(function(){

   $("img.toreaddimensions").click(function(){$(this).getDimensions();});
});

Где my-img — это класс имя используется для выбора моего изображения.

Jquery имеет два свойства, называемых naturalWidth и naturalHeight, вы можете использовать в этом случае.

$('.my-img')[0].naturalWidth 
$('.my-img')[0].naturalHeight

Как уже говорилось,

не будет работать, если изображения находятся в кеше. Эта проблема связана с тем, что webkit не запускает событие загрузки для кэшированных изображений, поэтому, если атрибуты width / height явно не заданы в теге img, единственный надежный способ получить изображения — дождаться запуска события Хави ответ ,window.load быть уволеным.

Переменная window.load событие будет fire всегда , так что после этого можно безопасно получить доступ к ширине / высоте и img без каких-либо трюк.

$(window).load(function(){

   //these all work

   $('img#someId').css('width');
   $('img#someId').width();
   $('img#someId').get(0).style.width;
   $('img#someId').get(0).width; 

});

Если вам нужно получить размер динамически загружаемых изображений, которые могут кэшироваться (загружаться ранее), вы можете использовать метод Xavi плюс строку запроса для запуска обновления кэша. Недостатком является то, что это вызовет другой запрос к серверу, для img, который уже кешируется и должен быть уже доступен. Глупый Webkit.

var pic_real_width   = 0,
    img_src_no_cache = $('img#someId').attr('src')   '?cache='   Date.now();

$('<img/>').attr('src', img_src_no_cache).load(function(){

   pic_real_width = this.width;

});

ps: если у вас есть QueryString в img.src вам придется , проанализировать его тег и добавлен дополнительный параметр для очистки кэша.

как говорит Люк Смит, загрузка изображения — беспорядок . Это не надежно во всех браузерах. Этот факт причинил мне большую боль. Кэшированное изображение вообще не будет запускать событие в некоторых браузерах, поэтому те, кто сказал «загрузка изображения лучше, чем setTimeout», ошибаются.

Решение Люка Смита здесь .

И есть интересная дискуссия о том, как этот беспорядок может быть обработан в jQuery 1.4.

Я обнаружил, что довольно надежно установить ширину в 0, затем дождаться, пока свойство «complete» станет истинным, а свойство width станет больше нуля. за ошибки тоже.

$("#myImg").one("load",function(){
  //do something, like getting image width/height
}).each(function(){
  if(this.complete) $(this).trigger("load");
});

Из комментария Криса: http://api.jquery.com/load-event/

Моя ситуация, вероятно, немного другая. Я динамически изменяю src изображения через javascript, и мне нужно было убедиться, что новое изображение имеет размеры, пропорциональные размеру фиксированного контейнера (в фотогалерее). Сначала я просто удалил атрибуты ширины и высоты изображения после его загрузки (через событие загрузки изображения) и сбросил их после расчета предпочтительных размеров. Однако, это не работает в Safari и, возможно, IE (я не проверил это в IE полностью, но изображение даже не показывается, так что …).

В любом случае, Safari сохраняет размеры предыдущего изображения, поэтому размеры всегда остаются позади одного изображения. Я предполагаю, что это как-то связано с кешем. Таким образом, самое простое решение — просто клонировать изображение и добавить его в DOM (важно, чтобы оно было добавлено в DOM для получения и высоты). Дайте изображению значение видимости скрытого (не используйте display none, потому что оно не будет работать). После того, как вы получите размеры, удалите клон.

Вот мой код с использованием jQuery:

// Hack for Safari and others
// clone the image and add it to the DOM
// to get the actual width and height
// of the newly loaded image

var cloned, 
    o_width, 
    o_height, 
    src = 'my_image.jpg', 
    img = [some existing image object];

$(img)
.load(function()
{
    $(this).removeAttr('height').removeAttr('width');
    cloned = $(this).clone().css({visibility:'hidden'});
    $('body').append(cloned);
    o_width = cloned.get(0).width; // I prefer to use native javascript for this
    o_height = cloned.get(0).height; // I prefer to use native javascript for this
    cloned.remove();
    $(this).attr({width:o_width, height:o_height});
})
.attr(src:src);

Это решение работает в любом случае.

Теперь существует плагин jQuery, event.special.load, чтобы иметь дело со случаями, когда событие загрузки для кэшированного изображения не срабатывает: http://github.com/peol/jquery.imgloaded/raw/master/ahpi.imgload.js

. Недавно мне нужно было найти ширину и высоту для установки размера по умолчанию для .dialog, представляющего график. Я использовал следующее решение:

 graph= $('<img/>', {"src":'mySRC', id:'graph-img'});
    graph.bind('load', function (){
        wid = graph.attr('width');
        hei = graph.attr('height');

        graph.dialog({ autoOpen: false, title: 'MyGraphTitle', height:hei, width:wid })
    })

Для меня это работает в FF3, Opera 10, IE 8,7,6

PS Вы можете найти еще несколько решений, заглянув внутрь некоторых плагинов, таких как LightBox или ColorBox

Чтобы добавить к ответу Хави, GitHub Пола Айриша Gitgub Дэвида Десандро предлагает функцию imagesLoaded () , которая работает на те же принципы, и обходит проблему, когда некоторые кэшированные изображения некоторых браузеров не запускают событие .load () (с умным original_src — & gt ; data_uri — & gt ; original_src ).

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

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

function LoadImage(imgSrc, callback){
  var image = new Image();
  image.src = imgSrc;
  if (image.complete) {
    callback(image);
    image.onload=function(){};
  } else {
    image.onload = function() {
      callback(image);
      // clear onLoad, IE behaves erratically with animated gifs otherwise
      image.onload=function(){};
    }
    image.onerror = function() {
        alert("Could not load image.");
    }
  }
}

Чтобы использовать этот сценарий:

function AlertImageSize(image) {
  alert("Image size: "   image.width   "x"   image.height);
}
LoadImage("http://example.org/image.png", AlertImageSize);

Но когда мы говорим о адаптивных экранах и если по какой-то причине мы хотим обрабатывать их с помощью jQuery, http://jsfiddle.net/9543z/2/

Я сделал несколько вспомогательных функций, используя плагин imagesLoaded jquery: https://github.com / desandro / imagesloaded

            function waitForImageSize(src, func, ctx){
                if(!ctx)ctx = window;
                var img = new Image();
                img.src = src;
                $(img).imagesLoaded($.proxy(function(){
                    var w = this.img.innerWidth||this.img.naturalWidth;
                    var h = this.img.innerHeight||this.img.naturalHeight;
                    this.func.call(this.ctx, w, h, this.img);
                },{img: img, func: func, ctx: ctx}));
            },

Вы можете использовать это, передав URL-адрес, функцию и ее контекст. Функция выполняется после загрузки изображения и возврата созданного изображения, его ширины и высоты.

waitForImageSize("image.png", function(w,h){alert(w "," h)},this)

Если изображение уже используется, вы должны:

  1. устанавливают размеры изображений для исходных

    image.css (‘width’, ‘initial’) ; image.css (‘height’, ‘initial’) ;

  2. получить размеры

    var originalWidth = $ (this) .width () ; var originalHeight = $ (this) .height () ;

Вы можете использовать свойства naturalWidth и naturalHeight элемента изображения HTML. (Вот еще Длинный ответ ).

. Вы могли бы использовать это так:

//you need a reference to the DOM element, not a jQuery object. It would be better if you can use document.getElementByTagsName or ID or any other native method
var pic = $("img")[0];
var pic_real_width = pic.naturalWidth;
var pic_real_height = pic.naturalHeight;

Кажется, что это работает во всех браузерах, кроме IE от версии 8 и ниже.

Для функций, где вы не хотите изменять исходное размещение или изображение .

$(this).clone().removeAttr("width").attr("width");
$(this).clone().removeAttr("height").attr("height);

Я проверил ответ Дио, и он отлично работает для меня.

$('#image').fadeIn(10,function () {var tmpW = $(this).width(); var tmpH = $(this).height(); });

Удостоверьтесь, что вы вызываете все свои функции так же. Они обрабатывают размер изображения в функции вызова функции fadeIn ().

Из вышеперечисленных шагов наиболее ресурсоемким является анализ DOM / CSS. Если вы хотите, чтобы ваша страница обрабатывалась быстрее, напишите эффективный CSS, исключив избыточные инструкции и объединив инструкции CSS в наименьшее количество ссылок на элементы. Сокращение количества узлов в вашем DOM-дереве также приведет к более быстрому рендерингу.

Я использую другой подход, просто сделаю Ajax-вызов к серверу, чтобы получить размер изображения, когда объект изображения используется.

//make json call to server to get image size
$.getJSON("http://server/getimagesize.php",
{"src":url},
SetImageWidth
);

//callback function
function SetImageWidth(data) {

    var wrap = $("div#image_gallery #image_wrap");

    //remove height
     wrap.find("img").removeAttr('height');
    //remove height
     wrap.find("img").removeAttr('width');

    //set image width
    if (data.width > 635) {
        wrap.find("img").width(635);
    }
    else {
         wrap.find("img").width(data.width);
    }
}

и, конечно, код на стороне сервера:

<?php

$image_width = 0;
$image_height = 0;

if (isset ($_REQUEST['src']) && is_file($_SERVER['DOCUMENT_ROOT'] . $_REQUEST['src'])) {

    $imageinfo = getimagesize($_SERVER['DOCUMENT_ROOT'].$_REQUEST['src']);
    if ($imageinfo) {
       $image_width=  $imageinfo[0];
       $image_height= $imageinfo[1];
    }
}

$arr = array ('width'=>$image_width,'height'=>$image_height);

echo json_encode($arr);

?>

Это работает кросс-браузер

var img = new Image();
$(img).bind('load error', function(e)
{
    $.data(img, 'dimensions', { 'width': img.width, 'height': img.height });                    
});
img.src = imgs[i];              

, чтобы получить измерения, используя

$(this).data('dimensions').width;
$(this).data('dimensions').height;

berserk

Еще одно предложение — использовать плагин imagesLoaded Глядя на вывод

$("img").imagesLoaded(function(){
alert( $(this).width() );
alert( $(this).height() );
});
$(document).ready(function(){
                            var image = $("#fix_img");
                            var w = image.width();
                            var h = image.height();
                            var mr = 274/200;
                            var ir = w/h
                            if(ir > mr){
                                image.height(200);
                                image.width(200*ir);
                            } else{
                                image.width(274);
                                image.height(274/ir);
                            }
                        }); 

// Этот код помогает отображать изображение с размером 200 * 274

Вот кросс-браузерное решение, которое вызывает событие, когда вы выбрали загружены изображения: http://desandro.github.io/imagesloaded/ вы можете посмотреть высоту и ширину в функции imagesLoaded ().

Наткнулся в этой теме пытаюсь найти ответ на свой вопрос. Я пытался определить ширину / высоту изображения в функции ПОСЛЕ загрузчика и продолжал получать 0. Я чувствую, что это может быть то, что вы ищете, хотя, как это работает для меня:

tempObject.image = $('<img />').attr({ 'src':"images/prod-"   tempObject.id   ".png", load:preloader });
xmlProjectInfo.push(tempObject);

function preloader() {
    imagesLoaded  ;
    if (imagesLoaded >= itemsToLoad) { //itemsToLoad gets set elsewhere in code
        DetachEvent(this, 'load', preloader); //function that removes event listener
        drawItems();
    }   
}

function drawItems() {
    for(var i = 1; i <= xmlProjectInfo.length; i  )
        alert(xmlProjectInfo[i - 1].image[0].width);
}

Проверьте этот репозиторий в github!

Отличный пример проверить ширину и высоту, используя Javascript

https://github.com/AzizAK/ImageRealSize

— Отредактировано запрашивается из некоторых комментариев ..

мы используем

 function CheckImageSize(){
var image = document.getElementById("Image").files[0];
           createReader(image, function (w, h) {

                alert("Width is: "   w   " And Height is: " h);
});            
}


  function  createReader(file, whenReady) {
        var reader = new FileReader;
        reader.onload = function (evt) {
            var image = new Image();
            image.onload = function (evt) {
                var width = this.width;
                var height = this.height;
                if (whenReady) whenReady(width, height);
            };
            image.src = evt.target.result;
        };
        reader.readAsDataURL(file);
    }

и HTML-код:

<html>
<head>
<title>Image Real Size</title>
<script src="ImageSize.js"></script>
</head>
<body>
<input type="file" id="Image"/>
<input type="button" value="Find the dimensions" onclick="CheckImageSize()"/>
</body>
<html>