Google Chrome снова делает что-то не так

Question

Chrome неправильно сообщает значения width и height для изображений во время или сразу после загрузки. Jquery используется в этом примере кода:

<img id='image01' alt='picture that is 145x134' src='/images/picture.jpg' />

<script>
 var img = $( 'img#image01' )

 img.width() // would return 145 in Firefox and 0 in Chrome.
 img.height() // would return 134 in Firefox and 0 in Chrome.
</script>

Если вы поместите скрипт в функцию $(function(){}), результат будет таким же.но если вы запустите код через несколько секунд после загрузки страницы, chrome вернет правильный результат.

<script>
  function example () {
    var img = $( 'img#image01' );

    img.width() // returns 145 in both Firefox and Chrome.
    img.height() // returns 134 in both Firefox and Chrome.
  }
  window.setTimeout( example, 1000 )
</script>

Также, если вы укажете width и *Значения 1020 * height в теге img , кажется, что скрипт работает должным образом в Firefox и Chrome .

<img id='image01' src='/images/picture.jpg' width=145 height=134 />

Но так как вы не всегда можете контролировать ввод html, это не идеальный обходной путь.Можно ли исправить патч jQuery с лучшим решением этой проблемы?или мне нужно будет указать ширину и высоту для каждого изображения в моем коде?

Answer 1

Ваш цитируемый код, делающий это в строке, получает разумный результат, так как изображение может не загружаться до того, как ваш код выполнится. Вы сказали, что поместили его в обработчик onload, и это также дает тот же результат. Вы действительно имели в виду обработчик onload? Потому что я не могу воспроизвести этот результат. Обратите внимание, что функция jQuery ready является , а не и обработчиком onload, это происходит намного раньше. Чтобы убедиться, что изображения загружены, используйте событие load или событие window load. jQuery ready происходит намного раньше этого.

Так что это должно работать:

$(window).bind('load', function() {
    var img = $("#theimage");
    log("Width: " + img.width());
    log("Height: " + img.height());
});

... (где log - это то, что выводит на страницу), и это должно работать:

$(document).ready(function() {
    $("#theimage").bind('load', function() { // BUT SEE NOTE BELOW
        var img = $(this);
        log("Width: " + img.width());
        log("Height: " + img.height());
    });
});

... но это не будет:

$(document).ready(function() {
    var img = $("#theimage");
    log("Width: " + img.width());
    log("Height: " + img.height());
});

... потому что это происходит слишком рано.

Редактировать : Я действительно, действительно должен был сказать выше: если вы смотрите событие изображения load (а не событие загрузки window), вам нужно проверить, чтобы убедиться, что изображение еще не было загружено, потому что его событие load, возможно, уже сработало. Это будет выглядеть примерно так:

$(document).ready(function() {
    var img, imgElement;

    // Find the image
    img = $("#theimage");
    imgElement = img[0];
    if (imgElement && imgElement.complete) {
        // Already loaded, call the handler directly
        loadHandler.call(imgElement);
    }
    else {
        // Not loaded yet, hook the event
        img.bind('load', loadHandler);
    }

    function loadHandler() {
        var img = $(this);
        log("Width: " + img.width());
        log("Height: " + img.height());
        img.unbind('load', loadHandler);
    }
});

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

Answer 2

Это не ошибка.Элемент img имеет ширину 0x0 до загрузки изображения.Вам следует дождаться полной загрузки изображения.Попробуйте что-то вроде этого:

$("img#image01").load(function(){
  //do things here
});

Answer 3

$('#img2').show(function() {
    if( $.browser.safari ){
      alert ( $('#img2').width() );
    }
});

.load не работает для измерения Chrome, поэтому используйте .show ;)

Answer 4

Вы пытались поместить этот код в

$(document).ready(function(){
});

, если это не помогло, используйте jQuerys .load () function

var $img = $('#image01'),
    iwidth = 0,
    iheight = 0;

$(document).ready(function(){
   $img.load(function(){
        var img = $('#image01');

        img.removeAttr('width').removeAttr('height').css({width: '', height: ''});

        iwidth  = this.width;
        iheight = this.height;
   });
});

$img[0].src = '';
$img[0].src = $img[0].src;