載入可見影像
重要性：4
假設我們有一個速度較慢的用戶端，並希望節省其行動裝置流量。
因此，我們決定不要立即顯示影像，而是用類似以下內容的佔位符取代它們
<img src="placeholder.svg" width="128" height="128" data-src="real.jpg">因此，最初所有影像都是 placeholder.svg。當頁面捲動到使用者可以看到影像的位置時，我們會將 src 變更為 data-src 中的影像，這樣影像就會載入。
以下是 iframe 中的範例
捲動它以查看「依需求」載入影像。
需求
- 當頁面載入時，那些在螢幕上的影像應該在任何捲動之前立即載入。
- 有些影像可能是常規的，沒有
data-src。程式碼不應變更它們。 - 一旦影像載入，捲動進/出時就不應再重新載入。
附註：如果您能做到，請提出更進階的解決方案，以「預載入」比目前位置低/後一頁的影像。
附註：僅處理垂直捲動，不處理水平捲動。
onscroll 處理常式應檢查哪些影像可見並顯示它們。
我們也希望在頁面載入時執行它，以立即偵測可見的影像並載入它們。
程式碼應在文件載入時執行，以便存取其內容。
或將其放在 <body> 底部
// ...the page content is above...
function isVisible(elem) {
let coords = elem.getBoundingClientRect();
let windowHeight = document.documentElement.clientHeight;
// top elem edge is visible?
let topVisible = coords.top > 0 && coords.top < windowHeight;
// bottom elem edge is visible?
let bottomVisible = coords.bottom < windowHeight && coords.bottom > 0;
return topVisible || bottomVisible;
}showVisible() 函式使用由 isVisible() 實作的可見度檢查，以載入可見的影像
function showVisible() {
for (let img of document.querySelectorAll('img')) {
let realSrc = img.dataset.src;
if (!realSrc) continue;
if (isVisible(img)) {
img.src = realSrc;
img.dataset.src = '';
}
}
}
showVisible();
window.onscroll = showVisible;附註：此解決方案也有 isVisible 的變體，它會「預載入」比目前文件捲動高/低 1 頁的影像。