最好的办法来改变背景图片在运行时AngularJs最好的、背景图片、办法、AngularJs

2023-09-14 00:11:35 作者:幼儿园里最可爱

我要创建通用的功能,可以让我改变任何部分的背景图像。通过提供的选项会后,我发现这两种方法。要选择改变形象最好的办法,因为在单页上我要多次改变背景设施。这将是提供给四,五段。

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.

办法

使用指令检查这个堆栈溢出link.

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

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

<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>

如上图所示,我要更新每个部分的背景图片属性。如果这些属性设置CSS文件中,这将减少时间来加载图像,即如果我们直接在HTML内嵌添加CSS样式,图像都将装上DOM负荷。这将使额外的请求,服务器以获取图像和DOM加载它们。我想追随战略,将减少我的SPA(单页应用程序)的加载时间。

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).

推荐答案

我觉得跟去&LT; D​​IV NG风格={背景图片:网址(/图像/+ backgroundImageUrl +')'}&GT;&LT; / DIV&GT; 应该是更有效的。

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.

从控制器的属性某些特定网址 NG-风格一起使用symple shoudl仅做特定的活动图像的要求。正因为如此,我认为它应该是最佳的解决方案。

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.