title: Lazy loading for angular src image
body: <p>I have 1000 images in a list which are defined in the way below:</p>
  <pre><code>&lt;img mat-list-avatar alt=&quot;&quot; [src]=&quot;file.preview() | async | safe)&quot; /&gt;
  </code></pre>
  <p>Since <code>file.preview()</code> takes around 200 milliseconds to execute, I would like to delay load it only for images that are visible in the browser viewport and get loaded bit by bit as the users loads them. So I found <code>loading=&quot;lazy&quot;</code> but file.preview() gets executed nonetheless for 1000 images.</p>
  <pre><code>&lt;img mat-list-avatar alt=&quot;&quot; loading=&quot;lazy&quot; [src]=&quot;file.preview | async
  | safe)&quot; /&gt;
  </code></pre>
  <p>Does anyone know why that is? Could that be related to the <code>[src]</code> directive called differently than a plain <code>src</code> attribute? Are there any other alternatives?</p>