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

Question

我正在编写一个 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" />

在 Javascript 中，每两秒一次：

var visibleElement = null;
var invisibleElement = null;

if( this.get("whatever").active == true )
{
    visibleElement = this.element.getElementsByClassName("icon-active")[0];
    invisibleElement = this.element.getElementsByClassName("icon-inactive")[0];
}
else
{
    visibleElement = this.element.getElementsByClassName("icon-inactive")[0];
    invisibleElement = this.element.getElementsByClassName("icon-active")[0];
}

visibleElement.style.display = null;
invisibleElement.style.display = "none";

在笔记本电脑和平板电脑上一切正常，但在某些智能手机上，每次我设置 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}}

我得到了同样的结果。因此，我尝试回滚 HTML 并保留 javascript 注释，这样我应该始终使所有图标可见，并且令人惊讶……它们都在闪烁并每两秒被请求一次……

我猜这个问题是由于一些（可能不是最新的？）智能手机浏览器在更新 ember-views 绑定数据时完全重绘图像。我将进一步调查哪个浏览器/版本存在此问题，并确保所有测试设备都使用其浏览器的最新版本 - 因为 ember 使用最新的 javascript 功能，更好地切出老式客户端。

以下是每两秒刷新一次数据的代码，如有异常请告知：

import Ember from 'ember';

export default Ember.Route.extend({
    model() {
        // record generation code here...
    },

    afterModel()
    {
        Ember.run.later(this, function()
            {
                this.refresh();
            }
        , 2000);
    }
});

-----解决方案-----

没有发生新的最新浏览器，因此，这种行为仅存在于“过去”......为了完整起见，我应该找到一种解决方案，使其在“旧”浏览器上也能正常工作，但我没有时间花在这上面。

如果你们中的任何人想出一个 360 度的解决方案，我们仍然很感激。

Answer 1

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

1) 使用跨度（或 div）代替图像 2) 添加图标作为背景图片

html:

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

css:

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

好处：图片会被css引擎和样式一起加载一次。

PS：如果你的图标默认不活动，你可以去掉inactive类：

html:

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

css:

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

PPS：使用 classNameBindings 使用 Ember 管理课程真的很容易

Answer 2

您需要将图像显示设置为无。

将显示设置为 inline-block 或 block 表示可见，none 表示不可见。

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

你可以使用css类

.active{
    display:block;
}

.inactive{
    display:none;
}

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

仍然会向服务器请求图像，因为您只是通过样式隐藏图像。

Display MDN