5

JavaScriptを使用して、HTMLページに基本的なグラフィック時計表示を作成しています。標準のDOMメカニズムを使用して数字のグラフィックを更新しています（各数字は必要な場合にのみ更新されます）。

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

時計は正常に動作しますが、コピーをRAMにキャッシュするのではなく、src属性が変更されるたびに、すべてまたは一部のブラウザーがサイトから画像を無意識にフェッチするかどうかを知りたいです。場合によっては、おそらく古いブラウザでは、グラフィッククロックを表示すると、データトラフィックが絶えず発生し、毎月のデータ許容量を食いつぶすのではないかと心配しています。

ですから、誰かがこれがリスクであるかどうかを教えてくれることを望んでいます。または、JavaScriptでグラフィックを交換するメカニズムを教えてください。これにより、毎回ネットワークフェッチをトリガーするのではなく、既存の画像がメモリから使用されることが保証されます。

（私はこれに対する決定的な答えを探し回っていましたが、見つけることができませんでした。1999/ 2000年以来DHTMLにJavaScriptを使用していないので、少し遅れています。少なくとも、書く必要はありません。すべてのJavaScript関数の2つのバージョン。1つはIE4/5用、もう1つはNetscape 4用です。）

4

4 に答える 4

3

トラフィックを心配する必要はありません。アプリケーションの初期化時に画像を簡単にキャッシュできます。次の 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>

于 2012-11-18T16:04:38.463 に答える
1

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 のみのソリューションは関連しています。<div>目に見えない数字を隠すために、目に見えないものを1つ作ります。個々の数字要素を追加および削除<div>し、時計表示の古い数字を数字倉庫要素の次の数字と交換します。

サブツリーは決して削除されないため、これらのソリューションは両方とも、DOM サブツリー内の画像が 1 回だけフェッチされるという動作をします。

于 2012-11-18T15:55:48.247 に答える
1

HTML5 キャンバス 2D 描画を使用することをお勧めします。画像をまったく必要とせず、現在、IE でもすべてのブラウザーのすべての新しいバージョンでサポートされています。これをチェックしてください

http://www.neilwallis.com/projects/html5/clock/index.php

このシンプルで素晴らしいチュートリアルを読んでください:

http://diveintohtml5.info/canvas.html

于 2012-11-19T18:55:01.450 に答える
0

絶対に確実にしたい場合は、数字の画像を使用して HTML 要素を生成し、それを でページに配置することができます。これによりdisplay: none、既にページに読み込まれています。

数字が必要な場合は、最初にページ上の HTML 要素を確認し、これを取得してdisplay: block必要なものに設定し、現在の数字要素をその要素に置き換えます。

サンプルコードとして、これをまとめました。

var digit_images = ["file/path/one.png", "file/path/two.png", "file/path/three.png", ...];

function giveMeTheDigit(digit)
{
    var img = digit_images[digit];
    var element = $("#digit_holder" + digit);

    if (element.length == 1)
    {
        $(".digit_holder").hide(); //hide the current holder
        element.show(); //show the new one
    }
    else
    {
        $('<div class="digit_holder" id="digit_holder' + digit + '"><img src="' + img + '" /></div>')
            .appendTo("#yourDestination");
    }
}

このコードはテストされていませんが、私が求めているものを知っていると思います。必要に応じてこれを編集できます。幸運を！

于 2012-11-18T15:51:30.210 に答える