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

概述我正在研究一种用于iPad的纹理选择器.所以基本上只是一堆图像元素.为了避免图像重新加载和延迟,我在JS中缓存并重用了 Image对象.这个排序 /** * Asynchronous version of memoize for use with callback functions. Asserts * that last argument is the callback. * * @p 我正在研究一种用于iPad的纹理选择器.所以基本上只是一堆图像元素.为了避免图像重新加载和延迟,我在Js中缓存并重用了 Image对象.这个排序

/** * 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);            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);    return c;};

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

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

有用的网址：

> Apple Developer Guide for HTML 5 Storage – 有关在Safari中使用HTML 5离线应用程序存储的一些文档.
> Blog post outlining iPhone problems of a similar nature – 这是一篇较旧的博客文章(2009-2010),但作者对使用HTML 5功能(在“HTML5离线应用程序缓存”标题下)有一些很好的建议.

总结

以上是内存溢出为你收集整理的javascript – 在iPad上使用JS进行图像缓存全部内容，希望文章能够帮你解决javascript – 在iPad上使用JS进行图像缓存所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。