在运行时更改AngularJs中背景图像的最佳方法答案

【问题标题】：Best approach to change background image in AngularJs at runtime在运行时更改AngularJs中背景图像的最佳方法
【发布时间】：2015-11-11 00:50:43
【问题描述】：

我想创建允许我更改任何部分的背景图像的通用功能。经过提供的选项后，我发现了这两种方法。想要选择更改图像的最佳方法，因为在单个页面上我想多次更改背景设施。它将提供给四到五个部分。

接近

使用指令检查此堆栈溢出link。

还有另一种角度范围变量的方法，我们可以在运行时更新。

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

必需的用法（关于指令）

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

如上所示，我将为每个部分更新 background-image 属性。如果在 CSS 文件中设置这些属性，它将减少加载图像的时间，即如果我们直接在 HTML 中添加内联 css 样式，所有图像将在 DOM 加载时加载。它将向服务器发出额外请求以获取图像并将它们加载到 DOM 中。我想遵循可以减少我的 SPA（单页应用程序）加载时间的策略。

【问题讨论】：

backgroundImage url="{{backgroundImageUrl2}}" 这是最好的选择。和可重用的代码

标签： angularjs background-image

【解决方案1】：

我认为使用<div ng-style="{'background-image': 'url(/images/' + backgroundImageUrl + ')'}"></div> 应该更有效。

你不会引入另一层复杂性，指令创建范围，观察和消化，指令也必须在开始时编译。

使用 symple ng-style 以及来自控制器属性的一些特定 url 应该只请求该特定的活动图像。因此，我认为它应该是最佳解决方案。

【讨论】：