Обнаруживать, когда изображение загружено в тег img Я использую Angular 2 и мне нужно определить, загружено ли изображение в тег изображения. Есть ли событие для этого? Что-то вроде этого: <img [src]="imagesource" [loaded]="dosomething()"> Ответ 1 <img [src]="imagesource" (load)="dosomething()"> Ответ 2 Расширяем первый ответ, чтобы изучить только что загруженное изображение. <img [src]="imagesource" (load)="onImageLoad($event)"> onImageLoad(evt) { if (evt && evt.target) { const width = evt.target.naturalWidth; const height = evt.target.naturalHeight; const portrait = height > width ? true : false; console.log(width, height, 'portrait: ', portrait); } } Однако я увидел, что Chrome отправляет событие дважды, с разными размерами! Я смог определить правильный размер по событию, где evt.scrElement.x и y были равны нулю. Но это не всегда так, и я не уверен, почему есть два события? onImageLoad(evt) { if (evt && evt.target) { const x = evt.srcElement.x; const y = evt.srcElement.y; if ((x === 0 ) && (y === 0)) { const width = evt.srcElement.width; const height = evt.srcElement.height; portrait = height > width ? true : false; console.log('Loaded: ', width, height, 'portrait: ', portrait); } } }
Ответ 2 Расширяем первый ответ, чтобы изучить только что загруженное изображение. <img [src]="imagesource" (load)="onImageLoad($event)"> onImageLoad(evt) { if (evt && evt.target) { const width = evt.target.naturalWidth; const height = evt.target.naturalHeight; const portrait = height > width ? true : false; console.log(width, height, 'portrait: ', portrait); } } Однако я увидел, что Chrome отправляет событие дважды, с разными размерами! Я смог определить правильный размер по событию, где evt.scrElement.x и y были равны нулю. Но это не всегда так, и я не уверен, почему есть два события? onImageLoad(evt) { if (evt && evt.target) { const x = evt.srcElement.x; const y = evt.srcElement.y; if ((x === 0 ) && (y === 0)) { const width = evt.srcElement.width; const height = evt.srcElement.height; portrait = height > width ? true : false; console.log('Loaded: ', width, height, 'portrait: ', portrait); } } }