我想创建通用功能,允许我更改任何部分的背景图像.在完成提供的选项后,我找到了这两种方法.想要选择最佳方法来更改图像,因为在单个页面上我想多次更改背景设施.它将提供四到五个部分.
途径
>使用指令检查此堆栈溢出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(单页应用程序)中的加载时间的策略.
