使用JavaScript更新图形时存在持续流量的风险？

我正在使用JavaScript在HTML页面上创建一个基本的图形时钟显示。我正在使用标准DOM机制更新数字图形（每个数字仅在必要时更新）：

digitOne.src = "file/path/one.png";

时钟工作正常，但我想知道是否所有或某些浏览器都会在每次src属性更改时无意识地从我的站点获取图像，而不是将副本缓存在RAM中。我担心在某些情况下，也许在较旧的浏览器中，查看图形时钟会不断产生数据流量，并消耗我每月的数据余量

所以我希望有人能告诉我这是否是一种风险，或者告诉我一种在JavaScript中交换图形的机制，这种机制可以保证从内存中使用现有图像，而不是每次都触发网络抓取

---

（我一直在寻找一个明确的答案，但没有找到。自从1999/2000年以来，我就没有在DHTML上使用JavaScript，所以我有点落后了。至少不再需要为每个JavaScript函数编写两个版本，一个用于IE4/5，一个用于Netscape 4。）

如果你想绝对确定，您可以生成带有数字图像的HTML元素，并将其放置到带有

display:none

的页面上，这样它就已经被加载到页面上了

如果需要数字，您首先检查页面上的HTML元素并获取该元素，将其设置为

display:block

或您需要的任何内容，然后用该元素替换当前数字元素

作为一些示例代码，我刚刚将其组合在一起

var digit_images=[“file/path/one.png”、“file/path/two.png”、“file/path/three.png”、…]

函数giveMeTheDigit（数字）
{
var img=数字图像[数字]；
变量元素=$（“#数字_持有人”+数字）；
if（element.length==1）
{
$（“.digit_holder”）.hide（）；//隐藏当前的holder
元素。show（）；//显示新元素
}
其他的
{
$('')
.附于（“#您的目的地”）；
}
}

---

这段代码没有经过测试，但我想你知道我在追求什么，可以根据你的需要编辑它。祝你好运

如果启用CSS，则以下模式有效。我之所以提出这个问题，是因为它比解决方案（如果不是）更清晰

<div id='clock'>
  <div id='digit0' style="display:block"><!-- ... --></div>
  <div id='digit1' style="display:none"><!-- ... --></div>
  <div id='digit2' style="display:none"><!-- ... --></div>
  <!-- ... -->
</div>

要更改数字显示，请隐藏当前可见的数字并使下一个数字可见。只有JavaScript的解决方案是相关的。制作一个不可见的

以隐藏不可见的数字。添加和删除单个数字

元素，将时钟显示中的旧数字与数字库元素中的下一个数字交换

---

这两种解决方案都具有这样的行为：DOM子树中的图像只提取一次，因为子树永远不会被删除。

您不必担心流量。初始化应用程序时很容易缓存图像。查看以下JSFIDLE中的示例：。 初始化应用程序时，我调用的是

loadImages

。此方法为每个数字创建

img

DOM元素。它的

src

是从数组

imagesrc

中获取的。调用

loadImages

函数时，浏览器会向服务器发出少量HTTP get请求：

实际上，每个请求都是在以下情况下提出的：

current.src = imagesSrc[i];

被执行

图像加载后，我只是将它们隐藏起来。当图像带有

display:none

或

visibility:hidden

时，用户实际上看不到它们，但当您使这些隐藏元素可见时，不会再发出请求，只会由浏览器执行最终请求。所有元素仅在需要时缓存和显示。您可以检查您的firebug或您正在使用的任何其他开发工具，确保不再请求这些图像

下面是我的示例中的代码：

var images = [],
    imagesSrc = ['https://lh3.ggpht.com/-107YXK-eAXs/UB6V49H9yuI/AAAAAAAACsY/69ceZJXaYZE/s1600/number-one-.png',
    'https://lh3.ggpht.com/-8rOrxAwDl48/Txf99Sus18I/AAAAAAAAL1w/VcmeP7rNFwY/s1600/number2c.png',
    'https://lh3.ggpht.com/-aGatHUidcGw/UG6Oh2HdWXI/AAAAAAAADQY/yc1CTC7cpOY/s1600/number3.png'];

function loadImages() {
    var current;
    for (var i = 0; i < imagesSrc.length; i += 1) {
        current = document.createElement('img');
        current.src = imagesSrc[i];
        images.push(current);
        current.style.display = 'none';
        document.body.appendChild(current);
    }
}

function showImage() {
    var current = showImage.current || 0;
    if (current >= 3) {
        current = 0;
    }
    hideImages();
    images[current].style.display = 'block';
    current += 1;
    showImage.current = current;
    setTimeout(function () {
        showImage();
    }, 1000);
}

function hideImages() {
    for (var i = 0; i < images.length; i += 1) {
        images[i].style.display = 'none';
    }
}

loadImages();
showImage();

var images=[]，
imagesSrc=['https://lh3.ggpht.com/-107YXK-eAXs/UB6V49H9yuI/AAAAAAAACsY/69ceZJXaYZE/s1600/number-one-.png',
'https://lh3.ggpht.com/-8rOrxAwDl48/Txf99Sus18I/AAAAAAAAL1w/VcmeP7rNFwY/s1600/number2c.png',
'https://lh3.ggpht.com/-aGatHUidcGw/UG6Oh2HdWXI/AAAAAAAADQY/yc1CTC7cpOY/s1600/number3.png'];
函数loadImages（）{
无功电流；
对于（变量i=0；i=3）{
电流=0；
}
hideImages（）；
图像[当前].style.display='block'；
电流+=1；
showImage.current=当前；
setTimeout（函数（）{
showImage（）；
}, 1000);
}
函数hideImages（）{
对于（变量i=0；i

对于我的例子，我只需要每个数字的一个实例。当然，对于您的时钟，您可以为每个数字创建四个实例（四个

img

DOM元素），以便显示重复项

对于您的应用程序来说，更好的方法可能是按需加载映像，但只加载一次，然后缓存它们。这样做很好，因为用户可能不会停留在您的页面上查看每个数字（从0到9），您可以通过这种延迟加载稍微提高性能。对于此策略，您可以查看。它的主要思想是管理一组可重用的小对象，并根据需要使用它们，同时控制其创建。下面是一个UML类图，它显示了模式的结构：

我提到的方法有不同的变体。可能你能做的最轻的变化就是使用一个包含所有数字的图像。之后，您可以创建一个数字大小的不同元素（例如div）。W

var images = [],
    imagesSrc = ['https://lh3.ggpht.com/-107YXK-eAXs/UB6V49H9yuI/AAAAAAAACsY/69ceZJXaYZE/s1600/number-one-.png',
    'https://lh3.ggpht.com/-8rOrxAwDl48/Txf99Sus18I/AAAAAAAAL1w/VcmeP7rNFwY/s1600/number2c.png',
    'https://lh3.ggpht.com/-aGatHUidcGw/UG6Oh2HdWXI/AAAAAAAADQY/yc1CTC7cpOY/s1600/number3.png'];

function loadImages() {
    var current;
    for (var i = 0; i < imagesSrc.length; i += 1) {
        current = document.createElement('img');
        current.src = imagesSrc[i];
        images.push(current);
        current.style.display = 'none';
        document.body.appendChild(current);
    }
}

function showImage() {
    var current = showImage.current || 0;
    if (current >= 3) {
        current = 0;
    }
    hideImages();
    images[current].style.display = 'block';
    current += 1;
    showImage.current = current;
    setTimeout(function () {
        showImage();
    }, 1000);
}

function hideImages() {
    for (var i = 0; i < images.length; i += 1) {
        images[i].style.display = 'none';
    }
}

loadImages();
showImage();