分类导航

iOS 发布时间：2022-03-30 发布网站：大佬教程 code.js-code.com

大佬教程收集整理的这篇文章主要介绍了iPad/iPhone浏览器崩溃时加载图像在Javascript，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。

我试图在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限制。如果你想做一个轮播应用程序，你必须先使用较小的占位符。您@R_598_9381@这种技术可能更容易实现。

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

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

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

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

…说这个：

@H_790_26@myImage.src="data:image/gif;base64,AN_ENCODED_IMAGE_DATA_StriNG"

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

var StriR_101_11845@agePath = "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 = StriR_101_11845@agePath + "?" + (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 ==