<div 可視加載是一種前端開發技術，可以在用戶滾動到特定位置時動態加載內容。它可以幫助提升網頁的加載性能，減少首屏加載時間。下面將通過幾個代碼案例來詳細解釋和說明div 可視加載的原理和用法。

第一個案例是一個簡單的實現div 可視加載的例子。，在HTML中定義一個容器div，設置其高度為200px，寬度為100%。然后在CSS中設置該容器的背景顏色為灰色，并將其初始高度設置為0。接下來使用JavaScript來監聽用戶的滾動事件，在用戶滾動到距離頂部200px的位置時，通過修改容器的高度為200px，從而動態加載內容。

HTML:
<div id="container"></div>
<br>
CSS:
#container {
height: 0;
width: 100%;
background-color: grey;
}
<br>
JavaScript:
window.addEventListener('scroll', function() {
var container = document.getElementById('container');
var distanceFromTop = container.getBoundingClientRect().top;
<br>
  if (distanceFromTop - window.innerHeight <= 0) {
container.style.height = '200px';
}
});

在這個案例中，通過監聽滾動事件，當用戶滾動到距離頂部200px的位置時，將容器div的高度設置為200px，從而實現了內容的動態加載。這樣可以避免一次性加載過多的內容，提升網頁的加載性能。

第二個案例是一個帶有動態加載圖片的例子。同樣地，在HTML中定義一個容器div，設置其高度為500px，寬度為100%，背景顏色設為白色。使用JavaScript來監聽滾動事件，在用戶滾動到距離頂部200px的位置時，將容器div的背景圖片設置為一張大圖。這樣可以避免一開始加載大圖帶來的性能問題。

HTML:
<div id="container"></div>
<br>
CSS:
#container {
height: 500px;
width: 100%;
background-color: white;
}
<br>
JavaScript:
window.addEventListener('scroll', function() {
var container = document.getElementById('container');
var distanceFromTop = container.getBoundingClientRect().top;
<br>
  if (distanceFromTop - window.innerHeight <= 0) {
container.style.backgroundImage = 'url(\'大圖地址\')';
}
});

通過這個案例，用戶可以在滾動到指定位置時再加載大圖，避免了一開始就加載大圖帶來的性能問題。這種方式可以提升頁面的加載速度和用戶體驗。

通過以上兩個代碼案例，我們可以看到div 可視加載是一種有效的前端技術來提升網頁的加載性能和用戶體驗。通過監聽滾動事件，我們可以在用戶滾動到特定位置時再加載內容，避免一次性加載過多的資源。這種技術的應用可以根據具體的需求進行靈活的調整，幫助優化網頁的加載速度和用戶體驗。