4

I want to create generic feature that allows me to change background image of any section. After going through options provided I found these two approaches. Want to choose best approach to change image because on single page I want multiple times change background facility. It will be available to four to five sections.

Approach

  1. Using Directive check this stack overflow link.

  2. Also there is another approach of angular scope variables that we can updates at runtime.

    <div ng-style="{'background-image': 'url(/images/' + backgroundImageUrl + ')'}"></div>

Required Usage ( With respect of Directive )

<body>
    <section backgroundImage url="{{backgroundImageUrl1}}">
        ...
    </section>
    <section backgroundImage url="{{backgroundImageUrl2}}">
        ...
    </section>
    <section backgroundImage url="{{backgroundImageUrl3}}">
        ...
    </section>
    <section backgroundImage url="{{backgroundImageUrl4}}">
        ...
    </section>
</body>

As shown above I am going to update background-image attribute for each section. If these property is set inside CSS file, it will reduce time to load images i.e. If we directly add inline css styling in HTML, all images will loaded on DOM load. It will make extra request to server to get images and load them in DOM. I wanted to follow strategy that will reduce loading time in my SPA(Single Page Application).

Community
  • 1
  • 1
Laxmi Salunkhe
  • 509
  • 1
  • 4
  • 19

1 Answers1

0

I think going with <div ng-style="{'background-image': 'url(/images/' + backgroundImageUrl + ')'}"></div> should be more effective.

You dont introduce another layer of complexity, directives create scopes, which are watched and digested, also directives must be compiled in the begining.

Using symple ng-style together with some specific url from controllers property shoudl only do request for that particular active image. Because of that i think it should be the optimal solution.

tomastrajan
  • 1,728
  • 14
  • 28