2
我最近發現移動Safari（在iOS 9.1上 - 儘管不確定舊Safari版本）對於多個連接和圖像有不幸的問題。如果您在加載頁面時有六個圖像，則會延遲在這六個圖像之後加載的XHR請求，延遲時間很長（30秒）。克服移動Safari瀏覽器的連接限制
例如，我使用標準的NodeJS/Express服務器加載了以下內容，並在警報出現之前看到了巨大的延遲 - 儘管所有圖像只有幾KB，並且我可以清楚地看到它們都是加載。 dev控制檯還顯示加載的圖像，但不顯示XHR請求。下載文件的時間非常短，但延遲非常大。
這不是任何其他瀏覽器（移動鉻，常規Safari瀏覽器等）的問題。
樣品問題HTML：
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<img src="/static/images/home/payment.png">
<img src="/static/images/home/couple-present-mobile.jpg">
<img src="/static/images/general/welcome.jpg">
<img src="/static/images/general/arrow-down.png">
<img src="/static/images/general/arrow-right.png">
<img src="/static/images/general/check.png">
<script>
var url = '/static/test.html'
var xhr = new XMLHttpRequest();
xhr.open('GET', encodeURI(url));
xhr.onload = function() {
alert(url) //This takes forever
};
xhr.send();
</script>
</body>
</html>一個奇怪的事情是，如果你跑了XHR請求之前，有6幅圖像，這將很好地工作。事實上，如果你甚至在下面做了這樣的事情，那沒問題。我認爲這是有效的，因爲後臺CSS圖像必須在XHR啓動後檢索URL。
更換爲背景的CSS圖像的img標籤之一，它的工作原理：
<!DOCTYPE html>
<html>
<head>
<style>
.test {
background-image: url("/static/images/home/check.png");
height: 400px;
}
</style>
</head>
<body>
<img src="/static/images/home/payment.png">
<img src="/static/images/home/couple-present-mobile.jpg">
<img src="/static/images/general/welcome.jpg">
<img src="/static/images/general/arrow-down.png">
<img src="/static/images/general/arrow-right.png">
<!--<img src="/static/images/general/check.png"> REMOVE THIS LINE and add the background image instead-->
<div class="test"></div>
<script>
var url = '/static/test.html;
var xhr = new XMLHttpRequest();
xhr.open('GET', encodeURI(url));
xhr.onload = function() {
console.log(url) //NO DELAYS!
};
xhr.send();
</script>
</body>
</html>而且我發現，只是運行7個同步XHR請求也不會導致此問題（如如下圖）：
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<script>
var urls = ['/static/images/home/payment.png',
'/static/images/home/couple-present-mobile.jpg',
'/static/images/general/arrow-right.png',
'/static/images/general/arrow-down.png',
'/static/images/general/welcome.jpg',
'/static/images/general/check.png',
'/static/test.html'];
for(var i = 0, ii = urls.length; i < ii; i++){
(function(){
var url = urls[i];
var xhr = new XMLHttpRequest();
xhr.open('GET', encodeURI(url));
xhr.onload = function() {
console.log(url)
};
xhr.send();
})()
}
</script>
</body>
</html>有沒有人碰到這個問題，並想出一個辦法來處理與它沒有減少圖像的數量或將其放入精靈或東西？
遇到同樣的事情，但沒有解決方案。同樣的東西在IOS 9.2 –
@MaxTheCat請參閱下面的我使用的解決方案。希望這會有所幫助。 – wlingke