更新:我认为有一种更简单的方法可以做到这一点,具体取决于您的应用程序。如果您只拥有一个 <img> 元素或 Image 对象(或者可能两个,例如“this”图像和“next”图像,如果您需要动画或过渡)而不是拥有多个图像,并且只需更新 @987654324 @、.width、.height 等等,你永远不应该接近 10MB 的限制。如果你想做一个轮播应用程序,你必须首先使用较小的占位符。您可能会发现这种技术可能更容易实现。
我想我实际上可能已经找到了解决此问题的方法。
基本上,您需要进行一些更深入的图像管理并明确缩小您不需要的任何图像。你通常会使用document.removeChild(divMyImageContainer) 或$("myimagecontainer").empty() 或你有什么来做到这一点,但在Mobile Safari 上这绝对没有任何作用;浏览器根本不会释放内存。
相反,您需要更新图像本身,使其占用很少的内存;您可以通过更改图像的src 属性来做到这一点。我知道的最快的方法是使用data URL。所以不要这么说:
myImage.src="/path/to/image.png"
...改为这样说:
myImage.src="data:image/gif;base64,AN_ENCODED_IMAGE_DATA_STRING"
下面是一个测试来证明它的工作。在我的测试中,我的 750KB 大图像最终会杀死浏览器并停止所有 JS 执行。但是在重置src 之后,我已经能够在图像实例中加载超过 170 次。下面还解释了代码的工作原理。
var strImagePath = "http://path/to/your/gigantic/image.jpg";
var arrImages = [];
var imgActiveImage = null
var strNullImage = "data:image/gif;base64,R0lGODlhEAAOALMAAOazToeHh0tLS/7LZv/0jvb29t/f3//Ub//ge8WSLf/rhf/3kdbW1mxsbP//mf///yH5BAAAAAAALAAAAAAQAA4AAARe8L1Ekyky67QZ1hLnjM5UUde0ECwLJoExKcppV0aCcGCmTIHEIUEqjgaORCMxIC6e0CcguWw6aFjsVMkkIr7g77ZKPJjPZqIyd7sJAgVGoEGv2xsBxqNgYPj/gAwXEQA7";
var intTimesViewed = 1;
var divCounter = document.createElement('h1');
document.body.appendChild(divCounter);
var shrinkImages = function() {
var imgStoredImage;
for (var i = arrImages.length - 1; i >= 0; i--) {
imgStoredImage = arrImages[i];
if (imgStoredImage !== imgActiveImage) {
imgStoredImage.src = strNullImage;
}
}
};
var waitAndReload = function() {
this.onload = null;
setTimeout(loadNextImage,2500);
};
var loadNextImage = function() {
var imgImage = new Image();
imgImage.onload = waitAndReload;
document.body.appendChild(imgImage);
imgImage.src = strImagePath + "?" + (Math.random() * 9007199254740992);
imgActiveImage = imgImage;
shrinkImages()
arrImages.push(imgImage);
divCounter.innerHTML = intTimesViewed++;
};
loadNextImage()
此代码是为了测试我的解决方案而编写的,因此您必须弄清楚如何将其应用到您自己的代码中。代码分为三部分,我将在下面解释,但唯一真正重要的部分是imgStoredImage.src = strNullImage;
loadNextImage() 只是加载一个新图像并调用shrinkImages()。它还分配了一个onload 事件,用于开始加载另一个图像的过程(错误:我应该稍后清除此事件,但我没有)。
waitAndReload() 只是为了让图像有时间出现在屏幕上。移动版 Safari 速度很慢,而且显示的图片很大,因此在加载图片后需要一段时间才能绘制屏幕。
shrinkImages() 遍历所有先前加载的图像(活动图像除外)并将.src 更改为 dataurl 地址。
我在这里为 dataurl 使用了一个文件夹图像(这是我能找到的第一个 dataurl 图像)。我只是简单地使用它,以便您可以看到脚本正常工作。您可能想改用透明 gif,因此请改用此数据 url 字符串:data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==