Ajax在Safari中加載的圖片不尊重srcset

所以我遇到了一個關於safari的奇怪問題。我正在爲我們公司開發一個新網站，並且我正在使用PJAX加載網頁內容。大多數我使用的srcset財產如下面的示例代碼顯示圖像的：Ajax在Safari中加載的圖片不尊重srcset

<img src="/img/projects/{{ post.cover-image }}.jpg" alt="{{ post.title }}" 
srcset="/img/projects/{{ post.cover-image }}-400.jpg 400w, 
/img/projects/{{ post.cover-image }}-600.jpg 600w, 
/img/projects/{{ post.cover-image }}-900.jpg 900w, 
/img/projects/{{ post.cover-image }}-900.jpg 1200w, 
/img/projects/{{ post.cover-image }}-900.jpg 1800w, 
/img/projects/{{ post.cover-image }}-900.jpg 2400w" 

sizes = "(min-width: 2400px) 900px, 
(min-width: 1800px) 600px, 
(min-width: 1200px) 500px, 
(min-width: 900px) 500px, 
(min-width: 600px) 600px, 
(min-width: 400px) 400px" />

注意，這是正在修建與化身，所以變量到位。

我在這些圖像上使用對象適合，我認識到它有自己的問題（主要是IE），但這是一個不同的主題。無論最初加載頁面還是通過點擊鏈接通過PJAX拉入頁面，Firefox和Chrome都能正確顯示正確的圖像。

Safari出現問題，如果頁面是加載的初始頁面，圖像將正確顯示，但當頁面通過點擊鏈接通過PJAX加載時，srcset中的最小圖像是正在加載的圖像。它也看起來像對象適合可能會打破以及由PJAX加載，但不是在初始加載。

這裏是一個網頁的鏈接，你可以看到這種情況發生的例子：http://insight.insightcreative.info/work

如果直接加載頁面，或在硬刷新，圖像將看起來都很好。但是，如果您通過單擊鏈接離開頁面，然後再次單擊工作鏈接返回到該頁面，則會看到所有圖像突然質量都很差，並正在加載-400（400px）只有圖像的大小版本。

發生的另一個奇怪的事情，如在此頁面上：http://insight.insightcreative.info/work/river-valley-bank-50th-anniversary.html是圖像將只顯示，如果最初加載頁面。如果您通過鏈接（它是工作頁面上的第一個項目）通過PJAX導航到頁面，則圖像甚至不會顯示。

起初我還以爲這些問題可能發生的，因爲我沒有足夠的尺寸包括在我的srcset圖像屬性，但在測試他們與包括大小屬性之後，他們仍然不正常工作。我不知道這是否是關於Safari瀏覽器的ajax，css或html問題。

任何人可以提供的洞察力將是了不起的。 再一次，這些只是我見過的反映在Safari中的問題。

編輯

至於圖像質量，我通過我的所有的圖像消失了，並下令從最高質量的圖像srcset第一，質量最低最後一種解決方法。由於Safari只查看srcset中的第一個圖像，因此至少可以獲得高質量的圖像。我仍然無法弄清楚爲什麼Safari在加載AJAX時將某些圖像設置爲0的高度，但我會爲此提出一個不同的問題。

來源

2017-08-03 Tyler Bramer

嘗試沒有src標記 –

@AhmedSunny我給了這個試驗，只是爲了測試，如果這會改變結果，但沒有改變（Safari仍然加載第一個srcset）。我也不想刪除原始的src標記，因爲我仍然需要那些不支持srcset的瀏覽器。謝謝你的想法。 –

我似乎遇到了很多問題，Safari在用AJAX加載時正常顯示我的圖像。我發現所有這些問題的根源都來自於在圖像上使用srcset屬性。出於某種原因，使用AJAX加載圖像具有srcset屬性，從而打破了圖像的顯示方式，只會查看屬性中的第一幅圖像。

我已向蘋果公司提交了一個錯誤報告，並且很想知道是否有其他人可以確認在Safari中由AJAX調用時打破了srcset。

來源

2017-08-04 18:03:08

我可以確認。對我而言，圖像被設置爲高度0，所以你什至都看不到任何東西！我必須自己手動設置高度，使用JavaScript，然後添加一個窗口調整大小回調手動更新它，基於縱橫比...荒謬！ –

@JordanCarter我以爲做同樣的事情，並能夠這樣做。我最終並沒有最終採取這種方法，因爲事情對我所設置的東西來說太髒了。 –

我可以確認Safari（開發人員預覽版）正在使用srcset屬性將圖像設置爲寬度和高度爲0時，他們加載了AJAX。在進行AJAX調用之前，srcset圖像在頁面上看起來很好。然後圖像看起來簡單地消失了，雖然我可以在Web檢查器中看到它們（在檢查器中將它們懸停在其srcset鏈接上，寬度和高度顯示0 x 0，括號中顯示正確的自然高度）。

更改CSS最小寬度和最小高度，甚至直接在img標籤上添加width =和height =並不能解決問題。調整頁面大小並不會改變情況;圖像仍然不顯示。唯一的「修復」是不使用srcset;只要我回滾到簡單的img標籤，AJAX就會以適當的寬度和高度加載我的圖像。

來源

2017-11-21 07:26:29 itmustbe

我設法通過刪除我自定義的書面代碼並使用Barba.js代替我的PJAX來解決我遇到的問題。 http://barbajs.org/ –

這個問題可以通過迫使圖像在異步加載後再次被解析來解決。

在你的Ajax回調函數，您可以選擇受影響的圖像，然後做這樣的事情：

$('.post').find('img').each((index, img) => { img.outerHTML = img.outerHTML; });

並不理想，但至少圖像顯示正常。

來源

2018-01-05 22:48:08 Nico

Ajax在Safari中加載的圖片不尊重srcset

回答

相關問題