jQuery是目前最流行的JavaScript庫之一,其提供的眾多事件和函數(shù)大大簡化了Web開發(fā)人員的工作。其中,img onload事件就是一個非常實(shí)用的事件。
$('img').on('load', function() {
console.log('image is loaded');
});
該事件可用于檢測圖像是否已加載完畢,可以用于一些需要大量圖片使用的應(yīng)用程序中,當(dāng)所有圖片都已加載完畢后,可以做一些特殊的動作,如顯示加載完成的提示或是激活某些操作按鈕。
注意,必須要把該事件綁定到img標(biāo)簽上,如果綁定到其他標(biāo)簽上會無效。另外,當(dāng)加載本地緩存的圖片時,該事件可能不會被觸發(fā),因?yàn)樵谶@種情況下圖片加載速度非常快。
$('img').each(function() {
if (this.complete) {
console.log('image is cached');
} else {
$(this).on('load', function() {
console.log('image is loaded');
});
}
});
上述代碼先用each()函數(shù)遍歷每個img標(biāo)簽,如果圖片已經(jīng)被緩存,則會自動觸發(fā)complete事件,否則就綁定load事件進(jìn)行加載。
總之,img onload事件可以幫助我們更好地控制圖片的加載行為,提升用戶體驗(yàn)。