Question

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

在某些页面上，有些图标会根据某些条件发生变化，为了实现这种效果，我声明了几个img标签，并通过使用CSS {{1}设置样式来制作我不需要的标签。 }。

在HTML中：

display: none

在Javascript中，每两秒钟一次：

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

在笔记本电脑和平板电脑上一切正常，但在某些智能手机上，每次设置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";时都会加载图像，这意味着，每隔两秒钟，可见图标就会一次又一次地从服务器上获取。 / p>

我不希望它首先发生以减少数据流量，这根本不是问题，但即使不需要，我也不喜欢获取资源，其次，图像重新加载会产生恼人的闪烁效果，即真是不可思议。

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

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

感谢大家的支持！这里有一些新闻：

我按照建议尝试注释掉所有适用于visibleElement.style.display = null;的javascript代码，并按如下方式修改HTML（模板）：

style.display

我得到了相同的结果。所以我试图回滚HTML并留下javascript评论，这样我应该总是看到所有图标，并且惊喜......它们都闪烁并且每两秒钟被请求......

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

用于每两秒刷新数据的代码如下，如果您发现任何不常见的事情，请通知：

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

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

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

如果你们中的任何人都想出了一个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 for visible，none设置为不可见。

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

您可以使用

等css类

.active{
    display:block;
}

.inactive{
    display:none;
}

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

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

Display MDN

离开“display：none”时如何防止图像重新加载

2 个答案: