jQuery的onloadstart()事件可以用于預加載圖像。當圖像開始加載時,該事件會被觸發。這對于需要在頁面中展示許多圖片的網站來說是很方便的。
下面是一個使用jQuery onloadstart事件的示例。假設有一個頁面要展示多張圖片,我們可以使用下面的代碼來預加載這些圖片:
$(document).ready(function(){ var images = ['image1.jpg', 'image2.jpg', 'image3.jpg']; var loaded = 0; for (var i = 0; i< images.length; i++) { var image = new Image(); $(image).on('loadstart', function(){ // 圖片開始加載時調用 console.log('Image ' + (loaded + 1) + ' loading...'); }); $(image).on('load', function(){ // 圖片加載完成時調用 loaded++; console.log('Image ' + loaded + ' loaded!'); if (loaded == images.length) { console.log('All images loaded!'); } }); image.src = images[i]; } });
在上面的代碼中,我們首先創建了一個圖像數組,然后使用一個循環來加載每個圖像。對于每個圖像,我們創建了一個新的圖像對象,并使用onloadstart事件監聽器來跟蹤圖像的加載進度。當圖像開始加載時,這個事件會被觸發,并打印一個消息到控制臺。
一旦圖像加載完成,另一個onload事件監聽器將被觸發。此監聽器遞增一個計數器以跟蹤已加載的圖像數量,并打印出另一個消息。
最后,當所有圖像都加載完成時,我們會打印出一個消息。