Question

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

方法

使用指令检查此堆栈溢出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（单页应用程序）中的加载时间的策略。

Answer 1

我认为使用table.rf-cal-popup { z-index: 4; }会更有效。

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

将symple rich:calendar与来自控制器属性shoudl的某些特定url一起使用，仅对该特定活动图像进行请求。因此，我认为它应该是最佳解决方案。

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

1 个答案: