更新:アプリケーションによっては、これを行うためのさらに簡単な方法があると思います。複数の画像を用意する代わりに、単純に 1 つの<img>要素またはImageオブジェクト (または、アニメーションや遷移が必要な場合は「この」画像と「次の」画像のように 2 つ) を使用し、単に 、 などを更新する場合は、次のようにする必要が.srcあり.widthます.height。 10MB の制限に近づくことはありません。カルーセル アプリケーションを実行する場合は、最初に小さいプレースホルダーを使用する必要があります。この手法の方が実装しやすいかもしれません。
私は実際にこれに対する回避策を見つけたかもしれないと思います。
基本的に、より深い画像管理を行い、不要な画像を明示的に縮小する必要があります。通常はdocument.removeChild(divMyImageContainer)or$("myimagecontainer").empty()または を使用してこれを行いますが、Mobile Safari ではこれはまったく何もしません。ブラウザがメモリの割り当てを解除することは決してありません。
代わりに、イメージ自体を更新する必要があるため、メモリをほとんど消費しません。画像のsrc属性を変更することでそれを行うことができます。私が知っている最も簡単な方法は、データ 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()
このコードは私のソリューションをテストするために書かれたものなので、自分のコードに適用する方法を理解する必要があります。コードは 3 つの部分で構成されており、以下で説明しますが、本当に重要な部分はimgStoredImage.src = strNullImage;
loadNextImage()新しい画像をロードして を呼び出すだけshrinkImages()です。また、onload別の画像をロードするプロセスを開始するために使用されるイベントを割り当てます (バグ: このイベントは後でクリアする必要がありますが、そうではありません)。
waitAndReload()ここにあるのは、画像が画面に表示される時間を許可するためだけです。Mobile Safari は非常に遅く、大きな画像を表示するため、画像が読み込まれてから画面が描画されるまでに時間がかかります。
shrinkImages()以前にロードされたすべてのイメージ (アクティブなイメージを除く) を.src調べて、dataurl アドレスに変更します。
ここでは、dataurl にファイル フォルダーの画像を使用しています (これは、私が見つけた最初の dataurl 画像でした)。スクリプトの動作を確認できるように、単純に使用しています。おそらく代わりに透明な gif を使用したいので、代わりに次のデータ URL 文字列を使用してください。data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==