<div 自動加載是一種在網頁中使用的技術，它可以在頁面加載時自動加載不同的內容或功能。通過使用<div>標簽和JavaScript，我們可以實現頁面的動態加載和更新，極大地提高用戶體驗。下面通過幾個代碼案例來詳細解釋<div 自動加載的使用方法和效果。

案例一：自動加載內容

<div id="content"></div>
<br>
<script>
window.onload = function(){
// 使用 AJAX 技術從服務器獲取內容
var xhr = new XMLHttpRequest();
xhr.open('GET', 'content.php', true);
xhr.onreadystatechange = function(){
if(xhr.readyState === 4 && xhr.status === 200){
document.getElementById('content').innerHTML = xhr.responseText;
}
};
xhr.send();
};
</script>

在這個案例中，我們使用了一個空的<div>標簽，它的id屬性為"content"。在頁面加載完成后，JavaScript代碼會自動發起一個AJAX請求去獲取服務器上的內容（在這里是content.php）。當服務器返回響應時，我們將獲取到的內容插入到<div>標簽中，達到自動加載內容的效果。通過這種方式，我們可以在頁面加載完成后動態地加載和更新不同的內容，而不需要用戶的額外操作。

案例二：自動加載更多

<div id="list"></div>
<button id="loadMoreButton">加載更多</button>
<br>
<script>
var pageNumber = 0;
<br>
function loadMore(){
var xhr = new XMLHttpRequest();
xhr.open('GET', 'content.php?page=' + pageNumber, true);
xhr.onreadystatechange = function(){
if(xhr.readyState === 4 && xhr.status === 200){
var response = JSON.parse(xhr.responseText);
var list = document.getElementById('list');
for(var i = 0; i < response.length; i++){
var item = document.createElement('div');
item.innerText = response[i];
list.appendChild(item);
}
pageNumber++;
}
};
xhr.send();
}
<br>
document.getElementById('loadMoreButton').addEventListener('click', loadMore);
</script>

這個案例實現了一個加載更多功能。在頁面中有一個<div>標簽（id為"list"）用于展示內容，還有一個按鈕（id為"loadMoreButton"）用于觸發加載更多操作。初始時，我們定義一個變量pageNumber表示當前加載頁面的頁碼，開始時為0。當用戶點擊按鈕時，JavaScript代碼會自動發起一個AJAX請求去獲取服務器上對應頁碼的內容，然后將內容動態插入到<div>標簽中。每次加載完畢后，頁碼增加1，以便下一次加載使用。通過這種方式，我們可以實現在用戶點擊加載按鈕后自動加載更多內容的效果。

而言，<div 自動加載是一種非常方便和效果顯著的技術，能夠極大地提升網頁的用戶體驗。通過簡單的HTML頁面結構和JavaScript代碼，我們可以實現頁面內容的動態加載和更新。無論是自動加載內容還是加載更多功能，<div 自動加載都為網頁開發帶來了更多的可能性。我們可以根據具體的需求和情景，靈活地使用<div 自動加載來實現更加豐富、交互性更強的網頁。