GIF under ng-hide element

Question

I know that when using a GIF in an HTML element, the thread that runs my JS is the same thread that plays the GIF.

I was wondering what happens when the GIF is under a ng-hide="true" element, does it still consumes CPU time?

For example:

<div ng-hide="true" class="splash-image"></div>

The splash-image class brings in the GIF.

In the above case, is the thread spending CPU time on playing the invisible GIF?

Thanks

Answer 1

There's two areas using memory: downloading the gif, and painting it in the browser.

As others have mentioned in the comments, ng-if removes the element from the DOM where ng-hide simply applies display: none to the element.

If you run a couple tests using the console, you can see that despite removing the element from the DOM, the asset is still downloaded even if the ng-if condition returns false.

So basically both ng-if and ng-hide download the asset, but neither spend resources painting the element. The only difference is that after downloading the asset, ng-if omits it from the DOM.

Below you can see the paint results of a normal image, then an image with ng-hide.