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

Я пишу Javascript, щоб змінити розмір великого зображення, щоб він помістився у вікно браузера користувача. (На жаль, я не контролюю розмір вихідних зображень.)

Отже, щось подібне буде в HTML:

<img id="photo"
     src="a_really_big_file.jpg"
     alt="this is some alt text"
     title="this is some title text" />

Чи можу я визначити, чи було завантажено srcзображення в imgтегу?

Мені це потрібно, оскільки я стикаюся з проблемою, якщо $(document).ready()вона виконується до того, як браузер завантажив зображення. $("#photo").width()і $("#photo").height()поверне розмір заповнювача (текст заміщення). У моєму випадку це щось на зразок 134 х 20.

Зараз я просто перевіряю, чи висота фотографії не перевищує 150, і припускаю, що якщо так, то це просто текст заміщення. Але це цілком зламано, і це може зламатися, якщо фотографія має менше 150 пікселів заввишки (не ймовірно в моєму конкретному випадку), або якщо альтернативний текст має висоту більше 150 пікселів (можливо, це може статися у маленькому вікні браузера) .

Редагувати: Для тих, хто хоче бачити код:

$(function()
{
  var REAL_WIDTH = $("#photo").width();
  var REAL_HEIGHT = $("#photo").height();

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

  function adjust_photo_size()
  {
    if(REAL_HEIGHT < 150)
    {
      REAL_WIDTH = $("#photo").width();
      REAL_HEIGHT = $("#photo").height();
      if(REAL_HEIGHT < 150)
      {
        //image not loaded.. try again in a quarter-second
        setTimeout(adjust_photo_size, 250);
        return;
      }
    }

    var new_width = . . . ;
    var new_height = . . . ;

    $("#photo").width(Math.round(new_width));
    $("#photo").height(Math.round(new_height));
  }

});

Оновлення : Дякуємо за пропозиції. Існує ризик того, що подія не буде запущена, якщо я встановлю для неї зворотний виклик $("#photo").load, тому я визначив подію onLoad безпосередньо на тезі зображення. Для запису, ось код, з яким я в підсумку пішов:

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

Потім у Javascript:

//This must be outside $() because it may get called first
var isPhotoLoaded = false;
function photoLoaded()
{
  isPhotoLoaded = true;
}

$(function()
{
  //Hides scrollbars, so we can resize properly.  Set with JS instead of
  //  CSS so that page doesn't break with JS disabled.
  $("body").css("overflow", "hidden");

  var REAL_WIDTH = -1;
  var REAL_HEIGHT = -1;

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

  function adjust_photo_size()
  {
    if(!isPhotoLoaded)
    {
      //image not loaded.. try again in a quarter-second
      setTimeout(adjust_photo_size, 250);
      return;
    }
    else if(REAL_WIDTH < 0)
    {
      //first time in this function since photo loaded
      REAL_WIDTH = $("#photo").width();
      REAL_HEIGHT = $("#photo").height();
    }

    var new_width = . . . ;
    var new_height = . . . ;

    $("#photo").width(Math.round(new_width));
    $("#photo").height(Math.round(new_height));
  }

});

Або додайте слухач події, або попросіть зображення оголосити себе при завантаженні. Потім з’ясуйте розміри звідти.

<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" />

За допомогою сховища даних jquery ви можете визначити стан "завантаженого".

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

Тоді в іншому місці ви можете зробити:

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

Правильною відповіддю є використання event.special.load

Можливо, подія завантаження не спрацює, якщо зображення завантажується з кешу браузера. Щоб врахувати таку можливість, ми можемо використовувати спеціальну подію завантаження, яка негайно спрацьовує, якщо зображення готове. event.special.load наразі доступний як плагін.

Відповідно до документів у .load ()

Ви хочете зробити те, що сказав Аллейн, однак пам’ятайте, що іноді зображення завантажується до готовності до дому, а це означає, що ваш обробник навантаження не спрацює. Найкращий спосіб зробити так, як говорить Аллаїн, але встановити src зображення за допомогою javascript після того, як приєднати завантажувач. Таким чином ви можете гарантувати, що він спрацює.

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

Відповідно до одного з останніх коментарів до вашого оригінального запитання

$(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, використовуйте прапорець, щоб пам’ятати, що зображення завантажено.

Спробуйте щось на зразок:

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

Існує плагін jQuery під назвою „imagesLoaded”, який забезпечує сумісний із браузером метод перевірки, чи завантажено зображення (елементи) елемента.

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

Використання для контейнера, у якому всередині багато зображень:

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

Плагін чудовий:

1. працює для перевірки контейнера з великою кількістю зображень всередині
2. працює для перевірки img, щоб перевірити, чи завантажився він

Будь-які коментарі щодо цього?

...

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

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

doShow();

...

Здається, це працює скрізь ...

Я щойно створив функцію jQuery для завантаження зображення за допомогою jQuerys Deferred Object, що дозволяє дуже легко реагувати на подію завантаження / помилки:

$.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;
};

Я виявив, що це спрацювало на мене

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

Загалом кредит належить Франку Швітерману, який прокоментував прийняту відповідь. Мені довелося помістити це сюди, це надто цінно ...

Ми розробили сторінку, де вона завантажувала декілька зображень, а потім виконувала інші функції лише після завантаження зображення. Це був зайнятий сайт, який генерував багато трафіку. Здається, що такий простий скрипт працював практично у всіх браузерах:

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

Але це потенційне питання для IE9!

ЄДИНИЙ браузер, про який ми повідомляли про проблеми, це IE9. Хіба ми не здивовані? Здається, що найкращий спосіб вирішити проблему - це не призначати зображенню src до тих пір, поки ПІСЛЯ не буде визначена функція завантаження, наприклад:

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

Здається, IE 9 іноді не кидає onload події з будь-якої причини. Інші рішення на цій сторінці (наприклад, рішення від Евана Керролла, наприклад) все ще не працювали. Логічно, що це перевіряло, чи стан завантаження вже було успішним і запускало функцію, і якщо ні, тоді встановіть обробник onload, але навіть коли ви це зробили, ми показали під час тестування, що зображення може завантажуватися між цими двома рядками js, тим самим здається незавантаженим до першого рядка, а потім завантажується до встановлення обробника onload.

Ми виявили, що найкращий спосіб отримати те, що ви хочете, - це не визначати 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>