Как с помощью Javascript / jQuery определить, загрузилось ли изображение?

Либо добавьте прослушиватель событий, либо заставьте изображение объявить о себе с помощью onload. Затем определите размеры оттуда.

<img id = "photo"
     onload='loaded(this.id)'
     src = "a_really_big_file.jpg"
     alt = "this is some alt text"
     title = "this is some title text" />

Попробуйте что-нибудь вроде:

$("#photo").load(function() {
    alert("Hello from Image");
});

Вы хотите сделать то, что сказал Аллен, однако имейте в виду, что иногда изображение загружается до готовности dom, что означает, что ваш обработчик нагрузки не срабатывает. Лучше всего сделать так, как говорит Аллен, но установить src изображения с помощью javascript после присоединения обработчика нагрузки. Таким образом, вы можете гарантировать, что он сработает.

Что касается доступности, будет ли ваш сайт работать для людей без JavaScript? Вы можете указать тегу img правильный src, прикрепить обработчик dom ready для запуска вашего js: очистить изображение src (установить фиксированное значение с помощью и высоту с помощью css, чтобы предотвратить мерцание страницы), затем установите обработчик загрузки img, затем сбросьте src на правильный файл. Таким образом вы охватите все базы :)

Есть комментарии по этому поводу?

...

doShow = function(){
  if ($('#img_id').attr('complete')){
    alert('Image is loaded!');
  } else {
    window.setTimeout('doShow()',100);
  }
};

$('#img_id').attr('src','image.jpg');

doShow();

...

Вроде везде работает ...

Правильный ответ - использовать event.special.load

It is possible that the load event will not be triggered if the image is loaded from the browser cache. To account for this possibility, we can use a special load event that fires immediately if the image is ready. event.special.load is currently available as a plugin.

Согласно документам на .нагрузка()

Используя хранилище данных jquery, вы можете определить «загруженное» состояние.

<img id = "myimage" onload = "$(this).data('loaded', 'loaded');" src = "lolcats.jpg" />

Тогда в другом месте вы можете сделать:

if ($('#myimage').data('loaded')) {
    // loaded, so do stuff
}

Я только что создал функцию jQuery для загрузки изображения с помощью Отложенный объект jQuerys, что позволяет очень легко реагировать на событие загрузки / ошибки:

$.fn.extend({
    loadImg: function(url, timeout) {
        // init deferred object
        var defer = $.Deferred(),
            $img = this,
            img = $img.get(0),
            timer = null;

        // define load and error events BEFORE setting the src
        // otherwise IE might fire the event before listening to it
        $img.load(function(e) {
            var that = this;
            // defer this check in order to let IE catch the right image size
            window.setTimeout(function() {
                // make sure the width and height are > 0
                ((that.width > 0 && that.height > 0) ? 
                    defer.resolveWith : 
                    defer.rejectWith)($img);
            }, 1);
        }).error(function(e) {
            defer.rejectWith($img);
        });

        // start loading the image
        img.src = url;

        // check if it's already in the cache
        if (img.complete) {
            defer.resolveWith($img);
        } else if (0 !== timeout) {
            // add a timeout, by default 15 seconds
            timer = window.setTimeout(function() {
                defer.rejectWith($img);
            }, timeout || 15000);
        }

        // return the promise of the deferred object
        return defer.promise().always(function() {
            // stop the timeout timer
            window.clearTimeout(timer);
            timer = null;
            // unbind the load and error event
            this.off("load error");
        });
    }
});

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

var image = $('<img />').loadImg('http://www.google.com/intl/en_com/images/srpr/logo3w.png')
.done(function() {
    alert('image loaded');
    $('body').append(this);
}).fail(function(){
    alert('image failed');
});

Смотрите, как это работает: http://jsfiddle.net/roberkules/AdWZj/

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

imageLoaded = function(node) {
    var w = 'undefined' != typeof node.clientWidth ? node.clientWidth : node.offsetWidth;
    var h = 'undefined' != typeof node.clientHeight ? node.clientHeight : node.offsetHeight;
    return w+h > 0 ? true : false;
};

Существует плагин jQuery под названием «imagesLoaded», который предоставляет кроссбраузерный метод проверки, загружены ли изображения элемента.

Сайт: https://github.com/desandro/imagesloaded/

Использование контейнера, внутри которого много изображений:

$('container').imagesLoaded(function(){
 console.info("I loaded!");
})

Плагин отличный:

1. работает для проверки контейнера с множеством изображений внутри
2. работает для проверки img, чтобы увидеть, загрузился ли он

Согласно одному из недавних комментариев к вашему исходному вопросу

$(function() {

  $(window).resize(adjust_photo_size);
  adjust_photo_size();

  function adjust_photo_size()  {
    if (!$("#photo").get(0).complete) {
       $("#photo").load(function() {
          adjust_photo_size();
       });
    } else {
      ... 
    }
});

Предупреждение Этот ответ может вызвать серьезный цикл в IE8 и ниже, потому что img.complete не всегда правильно устанавливается браузером. Если вы должны поддерживать ie8, используйте флаг, чтобы запомнить, что изображение загружено.

Я обнаружил, что это сработало для меня

document.querySelector("img").addEventListener("load", function() { alert('onload!'); });

Кредит полностью принадлежит Фрэнку Швитерману, который прокомментировал принятый ответ. Пришлось положить сюда, слишком ценно ...

Мы разработали страницу, на которую загружалось несколько изображений, а другие функции выполнялись только после того, как изображение было загружено. Это был загруженный сайт, который генерировал много трафика. Похоже, что следующий простой скрипт работал практически во всех браузерах:

$(elem).onload = function() {
    doSomething();
}

НО ЭТО ПОТЕНЦИАЛЬНАЯ ПРОБЛЕМА ДЛЯ IE9!

ЕДИНСТВЕННЫЙ браузер, о котором мы сообщали о проблемах, - это IE9. Мы не удивлены? Кажется, что лучший способ решить проблему - не назначать src изображению до тех пор, пока ПОСЛЕ определения функции onload, например:

$(elem).onload = function() {
    doSomething();
}
$(elem).attr('src','theimage.png');

Кажется, что IE 9 иногда не генерирует событие onload по какой-либо причине. Другие решения на этой странице (например, от Эвана Кэрролла) по-прежнему не работали. Логически это проверяет, было ли состояние загрузки уже успешным, и запускает функцию, а если нет, то устанавливает обработчик загрузки, но даже когда вы это делаете, мы продемонстрировали при тестировании, что изображение может загружаться между этими двумя строками js, тем самым отображается не загруженным в первую строку, а затем загружается до того, как будет установлен обработчик загрузки.

Мы обнаружили, что лучший способ получить желаемое - не определять src изображения до тех пор, пока вы не установите триггер события onload.

Мы совсем недавно прекратили поддержку IE8, поэтому я не могу говорить о версиях до IE9, в противном случае из всех других браузеров, которые использовались на сайте - IE10 и 11, а также Firefox, Chrome, Opera, Safari и т. д. люди использовали мобильный браузер - установка src перед назначением обработчика onload даже не была проблемой.

Могу я вообще предложить решение на чистом CSS?

Просто имейте Div, в котором вы хотите показать изображение. Установите изображение в качестве фона. Тогда имейте свойство background-size: cover или background-size: contain в зависимости от того, как вы этого хотите.

cover будет обрезать изображение до тех пор, пока меньшая сторона не закроет коробку. contain сохранит все изображение внутри div, оставляя вам пробелы по бокам.

Проверьте фрагмент ниже.

div {
  height: 300px;
  width: 300px;
  border: 3px dashed grey;
  background-position: center;
  background-repeat: no-repeat;
}

.cover-image {
  background-size: cover;
}

.contain-image {
  background-size: contain;
}

<div class = "cover-image" style = "background-image:url(https://assets1.ignimgs.com/2019/04/25/avengers-endgame-1280y-1556226255823_1280w.jpg)">
</div>
<br/>
<div class = "contain-image" style = "background-image:url(https://assets1.ignimgs.com/2019/04/25/avengers-endgame-1280y-1556226255823_1280w.jpg)">
</div>

Я считаю, что мне лучше всего подходит это простое решение:

        function setEqualHeight(a, b) {
            if (!$(a).height()) {
                return window.setTimeout(function(){ setEqualHeight(a, b); }, 1000);
            }
            $(b).height($(a).height());
        }

        $(document).ready(function() {
            setEqualHeight('#image', '#description');
            $(window).resize(function(){setEqualHeight('#image', '#description')});
        });
    </script>