如何使用HTML、CSS和jQuery實作圖片懶載入的進階技巧
懶載入技術（Lazy Loading）是一種提升網頁效能的技術手段，特別適用於包含大量圖片的網頁。透過使用HTML、CSS和jQuery，我們可以輕鬆實現圖片懶加載，以加快網頁載入速度，提升使用者體驗。本文將介紹如何使用這三種技術實現圖片懶加載的進階技巧，並給出具體的程式碼範例。
一、HTML準備工作
在HTML中，我們需要將每個需要懶載入的圖片的src屬性替換為一個自訂的data-src屬性。同時，為了實現圖片漸進式載入效果，我們可以設定一個佔位圖（placeholder）。
二、CSS樣式設定
為了在圖片載入前保持佔位圖的展示，我們需要使用CSS對img元素進行設定。同時，為了實現漸進式加載效果，我們還可以設定過渡效果。
img { width: 100%; height: auto; max-width: 100%; opacity: 0; transition: opacity 0.3s ease-in; } img.loaded { opacity: 1; }
三、jQuery實作懶載入
使用jQuery來實作懶載入非常簡單。我們可以使用$(window).on('scroll', function(){})事件監聽滾動事件，並透過判斷圖片是否可見來觸發懶加載。
$(window).on('scroll', function() { $('img').each(function() { if (isElementInViewport($(this)) && !$(this).hasClass('loaded')) { $(this).attr('src', $(this).data('src')).addClass('loaded'); } }); }); function isElementInViewport(el) { var rect = el.get(0).getBoundingClientRect(); return ( rect.top >= 0 && rect.left >= 0 && rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) && rect.right <= (window.innerWidth || document.documentElement.clientWidth) ); }
以上程式碼會監聽滾動事件，並對每個img元素進行判斷，如果該元素在可視區域內且未加載過，則將data-src屬性的值賦給src，並添加loaded類別名稱以標記已載入。
四、片段加載及效能最佳化
為了進一步提高效能，我們可以將圖片分成多個片段進行加載，而不是一次載入所有圖片。這樣可以避免頁面一次要求大量圖片而導致的效能問題。
$(window).on('scroll', function() { var windowHeight = $(window).height(); var scrollTop = $(window).scrollTop(); $('img:not(.loaded)').each(function() { if (isElementInViewport($(this), windowHeight, scrollTop)) { $(this).attr('src', $(this).data('src')).addClass('loaded'); } }); }); function isElementInViewport(el, windowHeight, scrollTop) { var rect = el.get(0).getBoundingClientRect(); return ( rect.top >= (scrollTop - windowHeight) && rect.top <= (scrollTop + windowHeight * 2) ); }
以上程式碼中，我們透過取得視窗的高度和捲軸的位置，判斷每張圖片是否在視覺區域內。只有在可視區域內的圖片才會被載入。
綜上所述，透過使用HTML、CSS和jQuery，我們可以輕鬆地實現圖片懶載入的進階技巧，並提高網頁的載入速度與使用者體驗。透過設定自訂的data-src屬性、CSS樣式和jQuery事件監聽，以及結合片段載入和效能最佳化，我們可以更靈活地控制圖片的載入行為，提升使用者體驗和頁面效能。希望本文所提供的程式碼範例能對您有所幫助！
以上是如何使用HTML、CSS和jQuery實作圖懶載入的進階技巧的詳細內容。更多資訊請關注PHP中文網其他相關文章！
