內容導覽
為什麼 Elementor 燈箱會失效？
Elementor 的燈箱（Lightbox）功能很強大，但開發者常遇到一個崩潰的問題：點擊圖片後，燈箱跳出來了，裡面卻是一片空白，或是永遠在轉圈圈。
這通常不是 Elementor 壞了，而是「延遲載入（Lazy Load）」搞的鬼。為了優化網站速度，瀏覽器只會載入畫面上的圖片，但燈箱內的圖片在點擊前處於「隱藏」狀態，導致代碼來不及抓取真實路徑，結果就是什麼都看不到。
解決方案：這段代碼是你的救星
這是一個實測有效的修復方案。這段 JavaScript 代碼會主動「監聽」燈箱的開啟動作，並在偵測到 Elementor 燈箱彈出時，強制將原本延遲載入的圖片路徑（data-src）轉為即時載入，並移除轉圈圈的預載動畫。
直接複製以下代碼：
document.addEventListener('DOMContentLoaded', function() {
// 建立一個監聽器，觀察 DOM 的變化
const observer = new MutationObserver(function(mutations) {
mutations.forEach(function(mutation) {
mutation.addedNodes.forEach(function(node) {
// 檢查是否為 Elementor 的燈箱節點
if (node.nodeType === 1 && node.classList.contains('elementor-lightbox')) {
// 給 Swiper 套件一點初始化時間
setTimeout(function() {
// 1. 強制載入所有帶有 data-src 的延遲圖片
node.querySelectorAll('img[data-src]').forEach(function(img) {
if (!img.src) {
img.src = img.dataset.src; // 將真實路徑填入 src
img.classList.remove('swiper-lazy');
img.classList.add('swiper-lazy-loaded'); // 標記為已載入
}
});
// 2. 手動移除正在轉圈的 Loading 預載標誌
node.querySelectorAll('.swiper-lazy-preloader').forEach(function(el) {
el.remove();
});
}, 50); // 延遲 50 毫秒確保初始化完成
}
});
});
});
// 開始監聽整個頁面的子節點變化
observer.observe(document.body, { childList: true });
});如何將代碼放進網站？
如果你是使用 Elementor Pro，請按照以下步驟執行：
- 進入後台：點擊「Elementor」 > 「自訂代碼（Custom Code）」。
- 新增代碼：點擊「Add New」，為這段代碼取名（例如：Fix Lightbox Bug）。
- 貼上內容：將上面的代碼完整貼入編輯框中。
- 設定位置：在右側將「Location」設定為 </body> – End。
- 發佈設定：點擊「Publish」，並選擇應用範圍為「Entire Site（全站）」。
如果你使用的是免費版，建議安裝外掛 「Code Snippets」 或 「Insert Headers and Footers」 來置入這段 JavaScript。
為什麼這個做法有效？
▍ 主動監聽，而非被動等待
一般的腳本只在頁面載入時執行一次，但燈箱是「動態生成」的。這段代碼使用 MutationObserver，這就像是一個守門員，隨時盯著網頁結構，一旦燈箱出現就立刻處理圖片。
▍ 解決 Swiper 的惰性問題
Elementor 的燈箱底層是 Swiper 套件，有時它會跟外掛（如 WP Rocket）的 Lazy Load 產生衝突。這段代碼跳過套件的判斷，直接把圖片「餵」給瀏覽器，確保 100% 顯現。
提醒： 修改代碼前，建議先清除網站快取（Cache），並在無痕視窗測試，確保修復生效！
