這篇文章主要介紹了jquery預加載圖片的方法,涉及jQuery操作圖片的相關技巧,需要的朋友可以參考下

本文實例講述了jquery預加載圖片的方法。分享給大家供大家參考。具體如下：

這段代碼可以在頁面打開前對圖片進行預加載，這個函數非常有用，可以給用戶帶來更好的體驗。

1. function preloadImages(oImageList, callback) { 
2. if ( typeof (oImageList) == 'object' && typeof (callback) === "function") { 
3. var iCallbackAfter = oImageList.length; 
4. var iPreloadInterval = window.setInterval(function() { 
5. if (iCallbackAfter === 0) { 
6. window.clearInterval(iPreloadInterval); 
7. callback(); 
8. } 
9. }, 100); 
10. $.each(oImageList, function(iIndex, sImage) { 
11. oImageList[iIndex] = new Image(); 
12. oImageList[iIndex].onload = function(oResult) { 
13. iCallbackAfter--; 
14. }; 
15. oImageList[iIndex].onabort = function(oResult) { 
16. console.log(oResult); 
17. }; 
18. oImageList[iIndex].onerror = function(oResult) { 
19. console.log(oResult); 
20. }; 
21. if (!sImage.match('http://')) { 
22. sImage = sImage; 
23. } 
24. oImageList[iIndex].src = sImage; 
25. }); 
26. } 
27. } 

希望本文所述對大家的jQuery程序設計有所幫助。