在網站開啟加載速度優化的情況下，圖片懶加載是一種很好的選擇。它只有當用戶將頁面滾動到該圖片的位置時才加載，從而避免了頁面一開始就加載所有圖片的情況。現在，我們來學習一下如何用jQuery來實現圖片懶加載。

首先，我們需要在HTML中將需要懶加載的圖片的src屬性設置為占位符，例如data-src。

<img src="placeholder.jpg" data-src="myimage.jpg" class="lazyload" />

之后，我們需要用 jQuery 監聽窗口的滾動事件。當用戶滾動到圖片位置時，我們將用data-src替換該圖片的src屬性。

$(window).on('load resize scroll', function() {
$('.lazyload').each(function() {
if(isInViewport($(this))) {
$(this).attr('src', $(this).attr('data-src'));
}
});
});
function isInViewport(element) {
var rect = element[0].getBoundingClientRect();
return (
rect.bottom >= 0 &&
rect.right >= 0 &&
rect.top <= (window.innerHeight || document.documentElement.clientHeight) &&
rect.left <= (window.innerWidth || document.documentElement.clientWidth)
);
}

這段代碼通過判斷每個 class 為“lazyload”的元素是否在視窗內，從而實現懶加載。在用戶滾動到該圖片的位置時，將其 data-src 屬性的值（圖片地址）替換掉 src 屬性的值，從而實現圖片的懶加載。

以上便是用 jQuery 實現圖片懶加載的方法，它可以幫助我們提高網站的加載速度和性能。