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

Question

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

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

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

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

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

Answer 1

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

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

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

Answer 2

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

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

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

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

Используйте вот так:

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

Answer 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, которые все равно устанавливаются программно

Answer 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 должен делать то же самое, под капотом.

Answer 5

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

Например:

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

Answer 6

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

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