Javascript 如何防止离开时图像重新加载"；显示：无“；

我正在编写一个Ember.js web应用程序，它被设计成一个自动化系统的用户界面，每两秒钟从LAN服务器轮询一次数据，以便始终显示“实时”过程数据。 该应用程序可从无线热点访问，允许注册用户浏览，因此任何设备（平板电脑、智能手机、笔记本电脑等）都可能是实际的客户端

在某些页面上，图标会根据某些条件发生变化，为了实现这一效果，我声明了几个

img

标记，并通过CSS

display:none

将不需要的标记设置为不可见

在HTML中：

<img class="icon-active" src="/images/icon1.jpg" />
<img class="icon-inactive" src="/images/icon2.jpg" />

---

在笔记本电脑和平板电脑上，一切正常，但在某些SmartHP手机上，每次我设置

visibleElement.style.display=null时，图像都会加载，这意味着每隔两秒钟，就会从服务器上一次又一次地获取可见图标

我不想一开始就为了减少数据流量而这样做，这根本不是问题，但我不喜欢获取资源，即使不需要，第二，图像重新加载会产生恼人的闪烁效果，这真的是不可下载的

如何强制每个客户端像平板电脑和笔记本电脑一样缓存图像

-----更多信息-----

谢谢大家的支持！这里有一些消息：

我尝试按照建议注释掉所有在
style.display上工作的javascript代码，并修改HTML（模板），如下所示：

{{#if whatever.active}}
    <img class="icon-active" src="/images/icon1.jpg" />
{{else}}
    <img class="icon-inactive" src="/images/icon2.jpg" />
{{/if}}

----解决方案---

新的最新浏览器不会出现，因此，这种行为只存在于“过去”。。。为了完整性，我应该找到一个解决方案，使它在“旧”浏览器上也能正常工作，但我没有时间花在这上面

如果你们中的任何人想出了一个360度的解决方案，答案仍然是值得赞赏的。
您需要将图像显示设置为none

将显示设置为“内联块”或“块”表示可见，将显示设置为“无”表示不可见

最好使用css类，因为您使用的是javascript。这可能会延迟在页面加载时隐藏图像的操作

您可以使用css类，如

.active{
    display:block;
}

.inactive{
    display:none;
}

使用这些类添加或切换特定img元素

仍然会有对服务器的图像请求，因为您仅通过样式隐藏图像

您需要将图像显示设置为none

将显示设置为“内联块”或“块”表示可见，将显示设置为“无”表示不可见

最好使用css类，因为您使用的是javascript。这可能会延迟在页面加载时隐藏图像的操作

您可以使用css类，如

.active{
    display:block;
}

.inactive{
    display:none;
}

使用这些类添加或切换特定img元素

仍然会有对服务器的图像请求，因为您仅通过样式隐藏图像

在我看来，这些图标是静态的。所以我的建议是使用css：

1） 如果需要图像，请使用跨距（或div）
2） 添加图标作为背景图像

html:

优点：css引擎将加载一次图像和样式

PS：如果默认情况下图标处于非活动状态，则可以取消
非活动的
类：

html:

PPS：使用Ember管理类非常容易，因为我看到这些图标是静态的。所以我的建议是使用css：

1） 如果需要图像，请使用跨距（或div）
2） 添加图标作为背景图像

html:

优点：css引擎将加载一次图像和样式

PS：如果默认情况下图标处于非活动状态，则可以取消
非活动的
类：

html:

PPS：使用
管理Ember类非常容易。您是否尝试过使用display block/inline block/inline而不是null？如果失败，那么您可以尝试添加或删除一个类来显示/隐藏图像-我以前从未见过在更改display属性时重新下载图像，只有在srcchanged@Pete这是对的。如果设置
显示：无，图像将不会重新下载
仅当您要从DOM中删除您的
img
时。使用android和iPhone打开页面时，服务器每次闪烁都会记录对图像资源的GET请求。@Pete我刚刚尝试使用“显示：内联”进行更改，但每次重新写入样式显示字段值时，仍然闪烁并获取图像，但我重复，这种情况只发生在一些智能手机上，是否可能“那个操作系统”的“那个浏览器”只是以一种“奇怪”的方式运行？如果是这样的话，我应该考虑一种完全不同的方法。您是否尝试过不使用CSS，而是使用余烬
{{If}}
？这至少可以让你所需要的一切远离DOM。接下来，检查映像上的缓存头，并验证在未处于开发人员模式时是否会发生这种情况。下一步你是否想每5秒更改一次图像？因为如果没有，ember在您更改之前不会更改任何内容。您是否尝试过使用display block/inline block/inline而不是null？如果失败，那么您可以尝试添加或删除一个类来显示/隐藏图像-我以前从未见过在更改display属性时重新下载图像，只有在srcchanged@Pete这是对的。如果设置
显示：无，图像将不会重新下载
仅当您要从DOM中删除您的
img
时。使用android和iPhone打开页面时，服务器每次闪烁都会记录对图像资源的GET请求。@Pete我刚刚尝试使用“显示：内联”进行更改，但每次重新写入样式显示字段值时，仍然闪烁并获取图像，但我重复，这种情况只发生在一些智能手机上，是否可能“那个操作系统”的“那个浏览器”只是以一种“奇怪”的方式运行？如果是这样的话，我应该考虑一个完全不同的方法。你有吗
.active{
    display:block;
}

.inactive{
    display:none;
}

<p><span>active parameter</span><span class="icon active"></span></p>
<p><span>inactive parameter</span><span class="icon inactive"></span></p>

.item
    width: 16px //icon dimensions
    height: 16px 
    // you may also add display: inline same as for images and so on

.active
    background-image: url('/images/icon1.jpg')

.inactive
    background-image: url('/images/icon2.jpg')

<p><span>active parameter</span><span class="icon active"></span></p>
<p><span>inactive parameter</span><span class="icon"></span></p>

.item
    width: 16px //icon dimensions
    height: 16px 
    background-image: url('/images/icon2.jpg')
    // you may also add display: inline same as for images and so on

.active
    background-image: url('/images/icon1.jpg')