javascript - キャッシュできる画像の最大数はありますか?

Question

サーバーに 352x288 サイズ 9kbs の 700 フレーム/画像があります。ブラウザでビデオクリップのようにレンダリングしたい。私は JQueryAjax を使用してこれらの画像を取得<img>し、タイマーを介して次々にロードされる の配列を返します。700 枚すべての画像をキャッシュしようとすると、特定できないサーバー エラーが発生することがわかりました。キャッシュを250枚の画像に減らしました。私の質問は、このタイプのキャッシュに制限があるかどうか、またブラウザや画像サイズに依存するかどうかです。

250 の最大問題を回避するために、画像が表示されるとすぐにキャッシュを動的に更新するつもりだったので、これを尋ねます。ただし、PC/クライアント ブラウザの制限などに依存している場合、これは失敗する可能性があります。

ありがとう。

私の既存のコード:

HTML

<a href="#" title="Play Motion Clip from Beginning">
<img alt="Play Motion" src="../Images/play_green_controls.png" style="border-style: none; width: 32px; height: 32px; background-color: #000000; cursor: pointer;"
            id="btnPlay" />
</a>
<div id="divImage" >
hello andy
</div>

Javascript:

<script type="text/javascript">
    var cache = [];
    var cacheImage = document.createElement('img');
    var interval = 100;
    var _total = 0;

    $("#btnPlay").click(function () {
        $.ajax({
            type: "POST",
            url: "Default3.aspx/GetClips",
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            success: function (msg) {
                cache = [];
                 _total = 0;
                $.each(msg.d, function () {
                    var cacheImage = document.createElement('img');
                    cacheImage.src = this['Text'];
                    cache[_total] = cacheImage;
                    _total++;
                }
                );
                setInterval('swapImages()', interval);
            },
            error: function (msg) {
                alert(msg.d);
            }
        });
    });
    var div = document.getElementById('divImage');
    var _index = 0;
    function swapImages() {

        if (_index < _total) {              
            if (_index > 0) {
                div.removeChild(cache[_index - 1]);
            }               
            div.appendChild(cache[_index]);
        }
        else {
            interval = 0;
        }
        _index++;
        if (_index  == _total)
        {
            div.removeChild(cache[_index - 1]);
            _index = 0;
            div.appendChild(cache[_index]);
        }
    }

コードビハインド:

[WebMethod]
public static ArrayList GetClips()
{
    ArrayList _arr = new ArrayList();
    int _max = 250;  //seems to be safe
    string[] _files = Directory.GetFiles(@"C:\Cloud\Catalogues\000EC902F17F\2\2013\10\6\10\f1fe61da-4684-48ed-a503-4a5586ece9c8","*.jpg"); //731
       for (int _index = 0; _index < _files.Length; _index++)
    {
        string _file = _files[_index];
        string[] _bits = _file.Split('\\');
        string _url = "Portal/Catalogues/000EC902F17F/2/2013/10/6/10/f1fe61da-4684-48ed-a503-4a5586ece9c8/" + _bits[10];
        ListItem _item = new ListItem();
        _item.Text = _url;
        _arr.Add(_item);
        if (_index == _max - 1)
        {
            break;
        }
    }
    return _arr;
}