トラフィックを心配する必要はありません。アプリケーションの初期化時に画像を簡単にキャッシュできます。次の JSFiddle で私の例を見てください: http://jsfiddle.net/pAwdC/。私が呼び出しているアプリケーションを初期化しているときloadImages
。このメソッドはimg
、桁ごとに DOM 要素を作成します。src
配列から取得されていますimagesSrc
。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();
私の例では、各数字のインスタンスが 1 つだけ必要です。もちろん、時計の場合はimg
、数字ごとに 4 つのインスタンス (4 つの DOM 要素) を作成して、重複を表示できます。
あなたのアプリケーションでは、オンデマンドで画像をロードする方が良いかもしれませんが、一度だけキャッシュしてからキャッシュしてください。ユーザーは各数字 (0 から 9 まで) を見るためにページにとどまらない可能性があり、この遅延読み込みによってパフォーマンスが少し向上する可能性があるため、これを行うのは良いことです。この戦略では、フライウェイト パターンを確認できます。主なアイデアは、再利用可能な小さなオブジェクトのセットを管理し、それらの作成を制御しながらオンデマンドで使用することです。以下は、パターンの構造を示す UML クラス図です。

私が言及したアプローチにはさまざまなバリエーションがあります。あなたができる最も軽いバリエーションは、すべての数字を含む単一の画像を使用することです。その後、数字のサイズでさまざまな要素 (div など) を作成できます。これらの要素に特定の位置の背景を設定すると、1 つの画像のみを読み込むだけですべての数字を作成できます。これにより、リクエストが 10 件から 1 件に減ります。このアプローチは、たとえば facebook で効果的に使用されています。
さらにサポートが必要な場合は、喜んでお手伝いします。</p>