JavaScript: знать, когда изображение полностью загружено

Если у меня есть маяк:

<img src="http://example.com/beacon" />

Я хочу, чтобы метод вызывался после завершения запроса маяка. Что-то вроде:

<script>
    $("img.beacon").load(function() {
        // do stuff knowing the beacon is done
    });
</script>

Возможно ли это? Это в jQuery?

Ответ 1

Конечно. Помните, что загрузка должна быть добавлена до атрибута src.

$('<img />').load( function(){
  console.log('loaded');
}).attr('src', imgUrl);

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

Ответ 2

$('img.beacon').load()

Не всегда будет работать правильно, обычно я делаю это:

$.fn.imageLoad = function(fn){
    this.load(fn);
    this.each( function() {
        if ( this.complete && this.naturalWidth !== 0 ) {
            $(this).trigger('load');
        }
    });
}

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

Используйте это:

<img src='http://example.com/image.png' class='beacon' />
<script type='text/javascript'>
$(document).ready(function(){ //document.ready not really necessary in this case
   $('img.beacon').imageLoad(function(){
      //do stuff
   });
});
</script>

Ответ 3

   <script type="text/javascript">
   $().ready(function() {

       $('img#beacon').attr('src', 'http://sstatic.net/so/img/so/logo.png')
            .load(function() { alert('Image Loaded'); })
            .error(function() { alert('Error Loading Image'); });
   });
   </script>

Это загрузит логотип Stackoverflow.

Если он загружается успешно, предупреждение ( "Изображение загружено" ); выполняется

если он не работает, предупреждение ( "Ошибка загрузки изображения" ); выполняется

конечно, любой из них может быть заменен вашими собственными функциями.

Как новый пользователь, он отказался от моего тега изображения; но тег изображения должен содержать только атрибут id = 'beacon'; если вы не хотите добавлять класс. Здесь мы устанавливаем атрибут 'src' в коде, обычно изображения, которые вы контролируете для завершения, имеют значения src, которые в любом случае установлены программно.

Ответ 4

Вот простой код javascript, который работает во всех браузерах:

var myImage = new Image();

myImage.onload = function() {
    var image_width = myImage.width;
    var image_height = myImage.height;
    $('#pictureEl').html('<img width="'+ image_width +'" height="'+ image_height +'" src='+ myImage.src + '></img>');           
};

myImage.src = myUrl;

Фрагмент jQuery должен делать то же самое, под капотом.

Ответ 5

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

Например:

<img ... onload="alert('test');" />

Ответ 6

Вы можете использовать событие onload, которое запускается после завершения загрузки всей страницы.

$(window).load(function(){
  //everything is loaded
});