CODEWITHSUNDEEP
javascripthtmlangularjs
johni
johni

Reputation: 5568

GIF under ng-hide element

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

Upvotes: 1

Views: 81

Answers (1)

Graham T
Graham T

Reputation: 966

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.

enter image description here

Upvotes: 1

Related Questions