jQuery是一款非常實用的JavaScript庫,可用于快速開發動態Web頁面。其中,loading(加載)代碼是一種廣泛應用于各種網站/Web應用程序的代碼。
在加載大量內容時,我們可能需要在頁面中顯示一個加載圖標,并等待所有內容加載完成后再顯示頁面。使用jQuery,我們可以輕松地添加一個loading圖標,以增強用戶體驗。
下面是一段使用jQuery加載圖標的代碼(代碼中loading.gif是gif格式的加載圖標):
//顯示加載圖標 $(window).on('load', function() { $('#loading').fadeOut(); $('body').removeClass('loading'); }); //隱藏加載圖標 $(document).ready(function() { $('body').addClass('loading'); $('img').on('load', function() { $(this).fadeIn(); }).each(function() { if(this.complete) { $(this).trigger('load'); } }); });
該代碼首先在文檔加載完成后隱藏加載圖標,并在所有圖像加載完成后再將其顯示,從而確保所有內容都已加載。通過使用這段代碼,您可以快速而輕松地為網站添加優秀的loading效果。