在iPad上使用JS进行图像缓存

Question

我正在研究一种用于iPad的纹理选择器.所以基本上只是一堆图像元素.为了避免图像重新加载和延迟,我Image在JS中缓存并重用了这些对象.这个排序

/**
 * Asynchronous version of memoize for use with callback functions. Asserts
 * that last argument is the callback.
 *
 * @param  {Function} func
 * @return {Function}
 */
 util.memoize.async = function(func) {
    var cache = {};
    return function() {
        var hash = JSON.stringify(arguments);
        var args = Array.prototype.splice.call(arguments, 0);
        var callback = args.pop();
        if (hash in cache) {
            return callback.apply(this, cache[hash]);
        }
        args.push(function() {
            cache[hash] = Array.prototype.splice.call(arguments, 0);
            callback.apply(this, cache[hash]);
        });
        return func.apply(this, args);
    };
};

/**
 * Creates new Image element and calls back with loaded image.
 * @param {string} url
 */
io.GetImage = function(url, callback) {
    var img = new Image();
    img.onload = function() {
        callback(img);
    };
    img.src = url;
};

picker.image_ = util.memoize.async(io.GetImage);

然后,每当我需要图像时,我都会调用picker.image_并获取缓存的图像.它可以在桌面,Chrome,Firefox,Safari上完美运行,但在iPad上,我的图像空白(未加载).这是为什么？我真的很喜欢这种方法,它表现得非常好.

看起来好像Mobile Safari在从DOM中删除图像数据时会删除图像数据.可能是吗？

更新:为了澄清,正在加载的数据是动态的,因此它不是AppCache最适合的用例.

更新*:没有完全令人满意的答案,这是我的解决方案.请注意,复制方法非常慢.

/**
 * Creates new Image element and calls back with loaded image.
 * @param {string} url
 */
var GetImage = function(url, callback) {
    var img = new Image();
    img.onload = function() {
        callback(img);
    };
    img.src = url;
};

/**
 * @param {number} num maximum number of stored images
 */
var ImagePool = function(num) {
    this.limit_ = num;
    this.canvases_ = {};
    this.order_ = [];
};

/**
 * Retrieve image from cache.
 *
 * @param  {string}   url      URL of request image
 * @param  {function(HTMLCanvasElement)} callback
 */
ImagePool.prototype.get = function(url, callback) {
    if (this.canvases_[url] !== undefined) {
        callback(this.copy_(url));
    } else {
        if (this.limit_ && this.order_.length == this.limit_) {
            delete this.canvases_[url];
            this.order_.pop();
        }
        GetImage(realUrl, function(img) {
            var c = document.createElement('canvas');
            c.width = img.width;
            c.height = img.height;
            var ctx = c.getContext('2d');
            ctx.drawImage(img, 0, 0);

            this.canvases_[url] = c;
            this.order_.unshift(url);
            callback(this.copy_(url));
        }.bind(this));
    }
};

/**
 * @param  {string} url
 * @return {HTMLCanvasElement}
 * @private
 */
ImagePool.prototype.copy_ = function(url) {
    var c = document.createElement('canvas'),
        cached = this.canvases_[url];
    c.width = cached.width;
    c.height = cached.height;
    var ctx = c.getContext('2d');
    ctx.drawImage(cached, 0, 0);
    return c;
};

Answer 1

我认为使用HTML 5离线应用程序缓存可以最好地解决您的问题.您列出了要缓存的资源,并在用户访问请求这些资源的页面后,将其缓存以供以后使用.你仍然需要让你的UI等到你的图像被加载,但是一旦加载它们,你就不必担心它们被丢弃只是因为它们不在DOM中(这个问题表明图像是在DOM中,但不在屏幕上显示,也被删除).

显然,Safari Mobile有5MB的缓存限制,可以通过要求用户同意扩展它来增加(Source).此博客文章中的评论表明iOS 4时可以使用此扩展提示.

有用的网址:

• 适用于HTML 5存储的Apple开发人员指南 - 有关在Safari中使用HTML 5离线应用程序存储的一些文档.

• 博客文章概述了类似性质的iPhone问题 - 这是一篇较旧的博客文章(2009-2010),但作者对使用HTML 5功能(在"HTML5离线应用程序缓存"标题下)有一些很好的建议.