国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

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

Astrian / 996人閱讀

摘要：可能部分限制已經(jīng)不再適用。當(dāng)移動端的瀏覽器加載了到的圖片數(shù)據(jù)后，就會停止加載其他圖片，甚至瀏覽器還會崩潰。大多數(shù)網(wǎng)站都不會受到這條限制的影響，因為保持頁面合理的大小通常是一種很聰明的做法。替換掉屬性后，舊的圖片數(shù)據(jù)最終得到了釋放。

原文作者：Thijs van der Vossen

本文翻譯自《How to work around the Mobile Safari image resource limit》，原文寫于2010年10月25日?？赡懿糠窒拗埔呀?jīng)不再適用。

翻譯本文的目的是作為《讀Zepto源碼之a(chǎn)ssets模塊》的附文，讀Zepto源碼系列文章已經(jīng)放到了github上，歡迎star: reading-zepto

正文開始：

受限于 Ipad 和 Iphone 的可用內(nèi)存，Safari 瀏覽器的移動端會比桌面端有著更嚴(yán)格的資源使用限制

其中之一是每個 HTML 頁面的圖片數(shù)據(jù)總量。當(dāng)移動端的 Safari 瀏覽器加載了 8 到 10MB 的圖片數(shù)據(jù)后，就會停止加載其他圖片，甚至瀏覽器還會崩潰。

大多數(shù)網(wǎng)站都不會受到這條限制的影響，因為保持頁面合理的大小通常是一種很聰明的做法。

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

我們有充足的理由相信，只通過刪除不再需要的圖片元素，就可以不受這條限制的影響：

var img = document.getElementById("previous");
img.parentNode.removeChild(img);

但是然并卵，因為某些原因，將圖片從 DOM （或者一個包含圖片的元素）中刪除時，圖片的真實數(shù)據(jù)并沒有釋放。真是頭大??！

而將圖片的 src 屬性設(shè)置為其他的（更小的）圖片鏈接，卻起到了作用。

var img = document.getElementById("previous");
img.src = "images/empty.gif";

替換掉 src 屬性后，舊的圖片數(shù)據(jù)最終得到了釋放。

我已經(jīng)徹底測試過這種方法，下面幾個方面是需要注意的：

將 src 屬性設(shè)置為其他圖片后，圖片數(shù)據(jù)不會立即釋放，需要一段時間讓垃圾回收器來真正地釋放內(nèi)存。這意味著，如果你太塊地插入圖片，依舊可能會陷入麻煩中。

在移動端 Safari 觸發(fā)限制后，即便刪除一部分或者全部已經(jīng)加載的數(shù)據(jù)，Safari 也不會再加載額外的圖片，這種情況即便在切換到其他頁面時也繼續(xù)存在。這意味著在測試這項技術(shù)時，你需要經(jīng)常重啟 Safari（這差點把我逼瘋了）。

如果你想將圖片元素從 DOM 中刪除，你還必須確保在更改 src 前，元素不能為垃圾回收掉，否則，舊圖片數(shù)據(jù)不會被釋放。下面這個是最好的解決方案：

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張圖片后會停止繼續(xù)加載，如果用 Zepto 的 assets 插件，會持續(xù)加載。）

在上周我和 Thomas Fuchs 解釋了這項技術(shù)后，他立即將它加入了 Zepto 中。這個周末，我貢獻了一個測試函數(shù)，你可以自己用它來測試下。

最后，所有文章都會同步發(fā)送到微信公眾號上，歡迎關(guān)注,歡迎提意見：

譯者：對角另一面

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://specialneedsforspecialkids.com/yun/88515.html

相關(guān)文章

  • 2017-09-11 前端日報

    摘要：前端日報精選使用實現(xiàn)和交互的彈幕效果類型檢測理解的閉包深入理解之代理和反射，和它們在之中的優(yōu)先級中文譯區(qū)塊鏈?zhǔn)侨绾喂ぷ鞯挠醚菔局鯇谧g怎樣處理移動端對圖片資源的限制掘金技術(shù)周刊的正則表達式掘金開發(fā)環(huán)境搭建掘金與復(fù)雜業(yè)務(wù)組件的 2017-09-11 前端日報 精選 使用canvas實現(xiàn)和HTML5 video交互的彈幕效果【JS】類型檢測理解 JavaScript 的閉包深入理解ES6...

    antyiwei 評論0 收藏0

  • 讀Zepto源碼之Stack模塊

    摘要：讀源碼系列文章已經(jīng)放到了上，歡迎源碼版本本文閱讀的源碼為改寫原有的方法模塊改寫了以上這些方法，這些方法在調(diào)用的時候，會為返回的結(jié)果添加的屬性，用來保存原來的集合。方法的分析可以看讀源碼之模塊。 Stack 模塊為 Zepto 添加了 addSelf 和 end 方法。 讀 Zepto 源碼系列文章已經(jīng)放到了github上，歡迎star: reading-zepto 源碼版本 本文閱讀的...

    crossea 評論0 收藏0

  • 讀Zepto源碼之a(chǎn)ssets模塊

    摘要：模塊是為解決移動版加載圖片過大過多時崩潰的問題。因為沒有處理過這樣的場景，所以這部分的代碼解釋不會太多，為了說明這個問題，我翻譯了這篇文章作為附文怎樣處理移動端對圖片資源的限制，更詳細地解釋了這個模塊的應(yīng)用場景。 assets 模塊是為解決 Safari 移動版加載圖片過大過多時崩潰的問題。因為沒有處理過這樣的場景，所以這部分的代碼解釋不會太多，為了說明這個問題，我翻譯了《How to...

    thursday 評論0 收藏0

  • 讀Zepto源碼之Form模塊

    摘要：模塊處理的是表單提交。表單提交包含兩部分，一部分是格式化表單數(shù)據(jù)，另一部分是觸發(fā)事件，提交表單。最終返回的結(jié)果是一個數(shù)組，每個數(shù)組項為包含和屬性的對象。否則手動綁定事件，如果沒有阻止瀏覽器的默認事件，則在第一個表單上觸發(fā)，提交表單。 Form 模塊處理的是表單提交。表單提交包含兩部分，一部分是格式化表單數(shù)據(jù)，另一部分是觸發(fā) submit 事件，提交表單。 讀 Zepto 源碼系列文章已...

    陳江龍 評論0 收藏0

  • 讀Zepto源碼之IOS3模塊

    摘要：用法與參數(shù)要理解這段代碼，先來看一下的用法和參數(shù)用法參數(shù)回調(diào)函數(shù)，有如下參數(shù)上一個回調(diào)函數(shù)返回的值或者是初始值當(dāng)前值當(dāng)前值在數(shù)組中的索引調(diào)用的數(shù)組初始值，如果沒有提供，則為數(shù)組的第一項。接下來，檢測回調(diào)函數(shù)是否為，如果不是，拋出類型錯誤。 IOS3 模塊是針對 IOS 的兼容模塊，實現(xiàn)了兩個常用方法的兼容，這兩個方法分別是 trim 和 reduce 。 讀 Zepto 源碼系列文章...

    lavnFan 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<