iPadiPhone浏览器崩溃时加载图像在Javascript

概述我试图在Safari中构建一个模仿iPad照片应用程序的图片库。它工作完美，除了一旦我加载超过6MB左右的图像，通过将它们添加到DOM或创建新的图像对象，新的图像停止加载或浏览器崩溃。这个问题是普遍足够的(所有其他人违反相同的限制)，我已经排除我的Javascript代码作为罪魁祸首。 考虑到你可以在一个元素或通过浏览器的媒体播放器流量超过几MB，这个限制似乎不必要，应该有一些解决方法可用。也许通 我试图在Safari中构建一个模仿iPad照片应用程序的图片库。它工作完美，除了一旦我加载超过6MB左右的图像，通过将它们添加到DOM或创建新的图像对象，新的图像停止加载或浏览器崩溃。这个问题是普遍足够的(所有其他人违反相同的限制)，我已经排除我的JavaScript代码作为罪魁祸首。

考虑到你可以在一个元素或通过浏览器的媒体播放器流量超过几MB，这个限制似乎不必要，应该有一些解决方法可用。也许通过释放内存或其他东西。

我也遇到了这个reference for UIWebView。

“JavaScript分配也限制为10 MB。如果您超过JavaScript的总内存分配的这个限制，Safari会引发异常。

这符合我看得相当不错。是否可能释放对象在JavaScript中，或者Safari / UIWebVIEw保持运行总和永远不会放开？或者，有没有任何解决方法加载数据，另一种方式，不吃这个10MB？

解决方法 更新：我想有一个更简单的方法来做到这一点，这取决于你的应用程序。而不是有多个图片，如果你只有一个< img>元素或Image对象(或者两个，如一个’this’图像和’下一个’图像，如果你需要动画或过渡)，只需更新.src，.wIDth，.height等，你应该永远不会接近10MB限制。如果你想做一个轮播应用程序，你必须先使用较小的占位符。您可能会发现这种技术可能更容易实现。

我想我可能真的找到了一个解决这个问题。

基本上，你需要做一些更深入的图像管理，并显式收缩任何你不需要的图像。你通常使用document.removeChild(divMyImageContainer)或$(“myimagecontainer”)。empty()或者你有什么，但在移动Safari上这绝对没有什么;浏览器从来不会释放内存。

相反，您需要更新映像本身，以便它占用非常少的内存;你可以通过改变图像的src属性来实现。我知道的最快的方式是使用data URL.所以，而不是这样说：

myImage.src="/path/to/image.png"

…说这个：

myImage.src="data:image/gif;base64,AN_ENCODED_IMAGE_DATA_STRING"

下面是一个测试来证明它的工作。在我的测试中，我的大型750KB镜像最终会杀死浏览器并停止所有Js exectution。但在重置src之后，我已经能够加载图像的实例超过170次。下面也将解释代码的工作原理。

var strImagePath = "http://path/to/your/gigantic/image.jpg";var arrImages = [];var imgActiveImage = nullvar 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(这是我可以找到的第一个数据库图像)。我使用它只是所以你可以看到脚本工作。您可能需要使用透明的gif，因此请改用以下数据url：data：image / gif; base64，R0lGODlhAQABAIAAAP /// wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw ==

总结

以上是内存溢出为你收集整理的iPad/iPhone浏览器崩溃时加载图像在Javascript全部内容，希望文章能够帮你解决iPad/iPhone浏览器崩溃时加载图像在Javascript所遇到的程序开发问题。

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