在web開發(fā)中,當(dāng)頁(yè)面加載較慢時(shí),用戶很容易產(chǎn)生不耐煩的情緒。為了解決這個(gè)問(wèn)題,我們可以使用jquery來(lái)實(shí)現(xiàn)頁(yè)面加載中的提示信息,以提高用戶體驗(yàn)。
$(window).on('load', function(){ $('.loading').fadeOut(500); //隱藏加載動(dòng)畫 $('body').css('overflowY', 'scroll'); //允許頁(yè)面滾動(dòng) });
這段代碼中,我們通過(guò)監(jiān)聽window的load事件,當(dāng)頁(yè)面資源全部加載完成后,隱藏loading動(dòng)畫,并且允許頁(yè)面滾動(dòng)。其中,500是隱藏動(dòng)畫的時(shí)間,可以根據(jù)實(shí)際情況修改。
另外,我們還需要添加一些CSS樣式來(lái)美化loading動(dòng)畫,如:
.loading { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 999; background: #fff url('loading.gif') no-repeat center center; }
在這里,我們給loading動(dòng)畫添加了一個(gè)固定定位,使其始終位于頁(yè)面最頂部。同時(shí),使用了loading.gif作為背景圖片,并讓其在中心位置重復(fù)平鋪。
通過(guò)使用jquery來(lái)實(shí)現(xiàn)頁(yè)面加載中的提示信息,我們可以瞬間提升web應(yīng)用的用戶體驗(yàn),減少用戶等待時(shí)間,讓用戶更愿意使用我們的產(chǎn)品。