Обновление: я думаю, что есть еще более простой способ сделать это, в зависимости от вашего приложения. Вместо нескольких изображений, если у вас просто есть один элемент <img> или Image объект (или, может быть, два, например, «это» изображение и «следующее» изображение, если вам нужны анимации или переходы), и просто обновите .src, .width, .height и так далее, вы никогда не должны приближаться к пределу в 10 МБ. Если вы хотите подать заявку на карусель, вы должны сначала использовать меньшие заполнители. Вы можете найти эту технику легче реализовать.
Думаю, я действительно нашел способ обойти это.
По сути, вам нужно немного углубиться в управление изображениями и явно уменьшить любое ненужное изображение. Обычно вы делаете это, используя document.removeChild(divMyImageContainer) или $("myimagecontainer").empty() или что-то еще, но в Mobile Safari это абсолютно ничего не делает; браузер просто никогда не освобождает память.
Вместо этого вам нужно обновить само изображение, чтобы оно занимало очень мало памяти; и вы можете сделать это, изменив атрибут src изображения. Самый быстрый способ, которым я знаю, это использовать URL данных . Поэтому вместо того, чтобы сказать это:
myImage.src="/path/to/image.png"
... вместо этого произнесите:
myImage.src="data:image/gif;base64,AN_ENCODED_IMAGE_DATA_STRING"
Ниже приведен тест, демонстрирующий его работу. В моих тестах мое большое изображение размером 750 КБ в конечном итоге убило бы браузер и остановило бы все работы 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() только для того, чтобы на экране отображалось время изображения. Mobile Safari довольно медленный и отображает большие изображения, поэтому после его загрузки требуется время, чтобы раскрасить экран.
shrinkImages() просматривает все ранее загруженные изображения (кроме активного) и заменяет .src на адрес dataurl.
Я использую изображение файловой папки для dataurl здесь (это было первое изображение dataurl, которое я смог найти). Я использую его просто, чтобы вы могли увидеть, как работает скрипт. Возможно, вы захотите использовать прозрачный gif вместо этого, поэтому используйте вместо этого строку URL-адреса данных: data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==