CODEWITHSUNDEEP
angularimagefunctiontypescriptfetch
Smitherson
Smitherson

Reputation: 423

Typescript - Check if image src has been fetched and call a function

I have the following element on my page:

<img src="https://i.pinimg.com/736x/2c/9d/07/2c9d0704ae49dfde914e2b477bf9279c--stick-figure-profile-pictures.jpg" />

How can I check when the src has been successfully fetched and call a function after that?

Upvotes: 1

Views: 942

Answers (2)

Karnan Muthukumar
Karnan Muthukumar

Reputation: 1863

Here is an answer,Let try this once,

html file,

<img [src]="imagesource" (load)="doSomething()">
<!--(or)-->
<img src="https://i.pinimg.com/736x/2c/9d/07/2c9d0704ae49dfde914e2b477bf9279c--stick-figure-profile-pictures.jpg" (load)="doSomething()">

Typescript file,

imagesource="https://i.pinimg.com/736x/2c/9d/07/2c9d0704ae49dfde914e2b477bf9279c--stick-figure-profile-pictures.jpg";

doSomething(){
   console.log("Loaded");
   //do your stuff
}

For more reference visit here

Detect when image has loaded in img tag

Upvotes: 1

Dean
Dean

Reputation: 2273

This should do it:

<img src="https://i.pinimg.com/736x/2c/9d/07/2c9d0704ae49dfde914e2b477bf9279c--stick-figure-profile-pictures.jpg" (load)="myFunction()"/>

Note the (load)="myFunction()" at the end (the way the content scrolls when it is code is slightly funky).

Upvotes: 1

Related Questions