Jquery 是一個常用的 JavaScript 庫，它能夠幫助我們實現(xiàn)許多比較復(fù)雜的交互效果。本文將介紹如何使用 Jquery 實現(xiàn)頁面滾動時顯示圖片的效果。

$(window).scroll(function(){
// 獲取滾動距離
var scrollHeight = $(window).scrollTop();
// 獲取窗口高度
var windowHeight = $(window).height();
// 遍歷所有圖片標(biāo)簽
$("img").each(function(){
// 如果圖片距離文檔頂部的距離小于滾動距離加窗口高度
if($(this).offset().top< scrollHeight + windowHeight){
// 修改圖片的 src 屬性
$(this).attr("src", $(this).attr("data-src"));
}
});
});

首先，我們用 Jquery 監(jiān)聽窗口滾動事件。在滾動事件回調(diào)函數(shù)中，首先獲取窗口滾動距離和窗口高度，然后遍歷所有圖片標(biāo)簽。如果圖片距離文檔頂部的距離小于滾動距離加窗口高度，說明該圖片已經(jīng)進(jìn)入了窗口可視區(qū)域，那么我們把圖片的 src 屬性修改為 data-src 屬性，這樣圖片就會被加載顯示了。

接下來，我們在 HTML 中給需要被延遲加載的圖片標(biāo)簽設(shè)置 data-src 屬性，將需要加載的圖片的地址賦值給該屬性。當(dāng)圖片進(jìn)入可視區(qū)后，我們就把該屬性的值賦給圖片的 src 屬性，這樣圖片就會被加載顯示了。

通過使用 Jquery 的滾動事件，我們可以輕松地實現(xiàn)頁面滾動時顯示圖片的效果。這種方式能夠極大地提升頁面加載速度，同時也能夠減少網(wǎng)絡(luò)請求的次數(shù)，提高頁面交互體驗。