【譯】怎樣處理 Safari 移動端對圖片資源的限制

原文做者：Thijs van der Vossen

本文翻譯自《How to work around the Mobile Safari image resource limit》，原文寫於2010年10月25日。可能部分限制已經再也不適用。

翻譯本文的目的是做爲《讀Zepto源碼之assets模塊》的附文，讀Zepto源碼系列文章已經放到了github上，歡迎star: reading-zepto

正文開始：

受限於 Ipad 和 Iphone 的可用內存，Safari 瀏覽器的移動端會比桌面端有着更嚴格的資源使用限制

其中之一是每一個 HTML 頁面的圖片數據總量。當移動端的 Safari 瀏覽器加載了 8 到 10MB 的圖片數據後，就會中止加載其餘圖片，甚至瀏覽器還會崩潰。

大多數網站都不會受到這條限制的影響，由於保持頁面合理的大小一般是一種很聰明的作法。

可是，在下面的場景中，你可能會遇到麻煩，如大型的圖片畫廊和幻燈片，或者是異步加載新數據的 web 應用，例如模擬不一樣版塊切換時的原生動畫（是的，你能夠用移動端 Safari 模擬 Flipboard 的切換效果 ）。

咱們有充足的理由相信，只經過刪除再也不須要的圖片元素，就能夠不受這條限制的影響：

var img = document.getElementById('previous');
img.parentNode.removeChild(img);複製代碼

可是然並卵，由於某些緣由，將圖片從 DOM （或者一個包含圖片的元素）中刪除時，圖片的真實數據並無釋放。真是頭大啊！

而將圖片的 src 屬性設置爲其餘的（更小的）圖片連接，卻起到了做用。

var img = document.getElementById('previous');
img.src = 'images/empty.gif';複製代碼

替換掉 src 屬性後，舊的圖片數據最終獲得了釋放。

我已經完全測試過這種方法，下面幾個方面是須要注意的：

1. 將 src 屬性設置爲其餘圖片後，圖片數據不會當即釋放，須要一段時間讓垃圾回收器來真正地釋放內存。這意味着，若是你太塊地插入圖片，依舊可能會陷入麻煩中。
2. 在移動端 Safari 觸發限制後，即使刪除一部分或者所有已經加載的數據，Safari 也不會再加載額外的圖片，這種狀況即使在切換到其餘頁面時也繼續存在。這意味着在測試這項技術時，你須要常常重啓 Safari（這差點把我逼瘋了）。
3. 若是你想將圖片元素從 DOM 中刪除，你還必須確保在更改 src 前，元素不能爲垃圾回收掉，不然，舊圖片數據不會被釋放。下面這個是最好的解決方案：

var img = document.getElementById('previous');
img.parentNode.removeChild(img);
img.src = 'data:image/gif;base64,' + 
      'R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs=';
window.timeout(function() {
img = null;
}, 60000);複製代碼

你能夠看到，我使用了 data URI 做爲替換圖片。

（若是你只是刪除圖片元素， iPad 在加載8張圖片後會中止繼續加載，若是用 Zepto 的 assets 插件，會持續加載。）

在上週我和 Thomas Fuchs 解釋了這項技術後，他當即將它加入了 Zepto 中。這個週末，我貢獻了一個測試函數，你能夠本身用它來測試下。

最後，全部文章都會同步發送到微信公衆號上，歡迎關注,歡迎提意見：

譯者：對角另外一面