jQuery.lazyload 是一個非常實用的 jQuery 插件,它可以讓我們的頁面圖片延遲加載,減少初始加載時間,提高頁面性能。jQuery.lazyload 還可以使用回調函數,當圖片被成功加載后,就會調用這個函數。下面我們來看一下示例代碼:
$("img.lazy").lazyload({ effect: "fadeIn", callback: function(element) { console.log("圖片 " + element.attr("src") + " 成功加載!"); } });
上面的代碼使用了 jQuery.lazyload,它會查找所有帶有lazy
類名的圖片并進行圖片的延遲加載。同時通過effect: "fadeIn"
配置讓圖片在加載完成后進行漸進式顯示。關鍵在于使用了回調函數callback
,當圖片成功加載后,就會調用這個函數并輸出一條帶有圖片地址的提示信息。
使用回調函數非常簡單,只需要在配置項中添加callback
屬性并指定一個函數即可。這個函數中要傳入一個參數element
,它表示當前成功加載的圖片元素。我們可以通過element.attr("src")
獲取到圖片的地址信息來輸出提示信息。
在實際項目開發中,我們可以使用回調函數來完成圖片加載完成后的操作,比如圖片顯示后進行一些動畫效果、調整圖片大小等等。此外,回調還可以配合threshold
屬性來優化圖片加載,當圖片距離瀏覽器窗口還有一個指定的距離時,就開始加載圖片,達到優化效果。