Mise à jour : Je pense qu'il y a un moyen encore plus facile de faire cela, en fonction de votre application. Au lieu d'avoir de multiples images, si vous avez simplement une <img> ou Image (ou peut-être deux, comme une image "this" et une image "next" si vous avez besoin d'animations ou de transitions) et mettez simplement à jour l'objet .src , .width , .height et ainsi de suite, vous ne devriez jamais vous approcher de la limite des 10 Mo. Si vous vouliez faire une application carrousel, vous devriez d'abord utiliser des espaces réservés plus petits. Vous trouverez peut-être cette technique plus facile à mettre en œuvre.
Je pense que j'ai peut-être trouvé une solution à ce problème.
En gros, vous devrez gérer les images de manière plus approfondie et réduire explicitement toutes les images dont vous n'avez pas besoin. Pour ce faire, vous utilisez normalement document.removeChild(divMyImageContainer) o $("myimagecontainer").empty() ou autre, mais sur Mobile Safari, cela ne fait absolument rien ; le navigateur ne désalloue tout simplement jamais la mémoire.
Au lieu de cela, vous devez mettre à jour l'image elle-même de manière à ce qu'elle occupe très peu de mémoire. src attribut. Le moyen le plus rapide que je connaisse pour le faire est d'utiliser un attribut URL des données . Donc au lieu de dire ça :
myImage.src="/path/to/image.png"
...dites plutôt ceci :
myImage.src="data:image/gif;base64,AN_ENCODED_IMAGE_DATA_STRING"
Vous trouverez ci-dessous un test pour démontrer son fonctionnement. Dans mes tests, ma grande image de 750KB a fini par tuer le navigateur et arrêter toute exécution de JS. Mais après avoir réinitialisé src J'ai été capable de charger des instances de l'image plus de 170 fois. Vous trouverez également ci-dessous une explication du fonctionnement du code.
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()
Ce code a été écrit pour tester ma solution, vous devrez donc trouver comment l'appliquer à votre propre code. Le code est composé de trois parties, que j'expliquerai ci-dessous, mais la seule partie vraiment importante est la suivante imgStoredImage.src = strNullImage;
loadNextImage() charge simplement une nouvelle image et appelle shrinkImages() . Il attribue également un onload qui est utilisé pour commencer le processus de chargement d'une autre image (bug : je devrais effacer cet événement plus tard, mais je ne le fais pas).
waitAndReload() n'est là que pour laisser le temps à l'image de s'afficher à l'écran. Mobile Safari est assez lent pour afficher de grandes images, il a donc besoin de temps après le chargement de l'image pour peindre l'écran.
shrinkImages() passe en revue toutes les images précédemment chargées (à l'exception de l'image active) et modifie l'attribut .src à l'adresse dataurl.
J'utilise ici une image de fichier-dossier pour le dataurl (c'était la première image de dataurl que j'ai pu trouver). Je l'utilise simplement pour que vous puissiez voir le script fonctionner. Vous voudrez probablement utiliser un gif transparent à la place, alors utilisez plutôt cette chaîne dataurl : data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==
