本發(fā)明涉及互聯(lián)網(wǎng)應(yīng)用技術(shù)領(lǐng)域，特別涉及一種動(dòng)態(tài)頁面加載方法和裝置。

背景技術(shù)：

隨著互聯(lián)網(wǎng)的發(fā)展，各類終端得到廣泛普及，人們獲取信息的工具并不在僅限于臺式電腦、筆記本電話等設(shè)備，而越來越多地依賴于智能手機(jī)、平板電腦等移動(dòng)終端。各種通過互聯(lián)網(wǎng)獲取得到的頁面作為信息的載體，也隨之越來越多地被各種移動(dòng)終端加載，以通過加載頁面為人們提供所需要的信息。

然而，如若此頁面為動(dòng)態(tài)頁面，該動(dòng)態(tài)頁面大都是通過一定的插件實(shí)現(xiàn)其動(dòng)態(tài)效果的，因此往往需要占用較多的傳輸資源和移動(dòng)終端中的系統(tǒng)資源，由此造成移動(dòng)終端中動(dòng)態(tài)頁面的加載非常困難，極大地影響了動(dòng)態(tài)頁面的實(shí)現(xiàn)。

技術(shù)實(shí)現(xiàn)要素：

基于此，有必要提供一種動(dòng)態(tài)頁面加載方法，所述方法占用較少傳輸資源和系統(tǒng)資源，以實(shí)現(xiàn)動(dòng)態(tài)頁面的快速加載。

另外，還有必要提供一種動(dòng)態(tài)頁面加載裝置，所述裝置占用較少傳輸資源和系統(tǒng)資源，以實(shí)現(xiàn)動(dòng)態(tài)頁面的快速加載。

為解決上述技術(shù)問題，將采用如下技術(shù)方案：

一種動(dòng)態(tài)頁面加載方法，包括：

通過動(dòng)態(tài)頁面訪問的觸發(fā)請求獲取頁面文件；

解析所述頁面文件得到所述動(dòng)態(tài)頁面對應(yīng)的標(biāo)簽和描述所述標(biāo)簽的樣式描述信息，

根據(jù)所述標(biāo)簽進(jìn)行動(dòng)態(tài)頁面繪制，以進(jìn)行所述標(biāo)簽分別對應(yīng)的遮罩元素和動(dòng)畫元素的顯示；

在所述遮罩元素和動(dòng)畫元素上執(zhí)行對應(yīng)的樣式描述信息，以得到動(dòng)態(tài)頁面。

一種動(dòng)態(tài)頁面加載裝置，包括：

請求發(fā)起模塊，用于通過動(dòng)態(tài)頁面訪問的觸發(fā)請求獲取頁面文件；

解析模塊，用于解析所述頁面文件得到所述動(dòng)態(tài)頁面對應(yīng)的標(biāo)簽和描述所述標(biāo)簽的樣式描述信息；

頁面繪制模塊，用于根據(jù)所述標(biāo)簽進(jìn)行動(dòng)態(tài)頁面繪制，以進(jìn)行所述標(biāo)簽分別對應(yīng)的遮罩元素和動(dòng)畫元素的顯示；

效果實(shí)現(xiàn)模塊，用于在所述遮罩元素和動(dòng)畫元素上執(zhí)行對應(yīng)的樣式描述信息，以得到動(dòng)態(tài)頁面。

由上述技術(shù)方案可知，通過用戶觸發(fā)的動(dòng)態(tài)頁面訪問，將觸發(fā)請求獲取此動(dòng)態(tài)頁面相應(yīng)的頁面文件，解析頁面文件得到動(dòng)態(tài)頁面對應(yīng)的標(biāo)簽和描述標(biāo)簽的樣式描述信息，根據(jù)標(biāo)簽進(jìn)行動(dòng)態(tài)頁面繪制，以進(jìn)行遮罩元素和動(dòng)畫元素的顯示，該遮罩元素和動(dòng)畫元素相配合，用以實(shí)現(xiàn)頁面中的動(dòng)態(tài)效果，將對應(yīng)的樣式描述信息分別應(yīng)用到顯示的遮罩元素和動(dòng)畫元素上，以在顯示的遮罩元素和動(dòng)畫元素上執(zhí)行對應(yīng)的樣式描述信息，得到動(dòng)態(tài)頁面，在此動(dòng)態(tài)頁面的加載過程中，并不需要通過一定的插件即可實(shí)現(xiàn)動(dòng)態(tài)效果，所占用的傳輸資源和系統(tǒng)資源較小，對于移動(dòng)設(shè)備的動(dòng)態(tài)頁面加載而言，極大地提高了加載速度和性能，優(yōu)化了移動(dòng)端頁面中動(dòng)態(tài)效果的實(shí)現(xiàn)。

附圖說明

圖1是本發(fā)明實(shí)施例提供的一種終端設(shè)備的結(jié)構(gòu)示意圖；

圖2是一個(gè)實(shí)施例中動(dòng)態(tài)頁面加載方法的流程圖；

圖3是圖2中解析頁面文件得到動(dòng)態(tài)頁面對應(yīng)的標(biāo)簽和描述標(biāo)簽的樣式描述信息的方法流程圖；

圖4是圖2中根據(jù)標(biāo)簽進(jìn)行動(dòng)態(tài)頁面繪制，以進(jìn)行標(biāo)簽分別對應(yīng)的遮罩 元素和動(dòng)畫元素的顯示的方法流程圖；

圖5是一個(gè)實(shí)施例中動(dòng)態(tài)頁面加載的動(dòng)態(tài)頁面示意圖；

圖6是一個(gè)實(shí)施例中動(dòng)態(tài)頁面加載裝置的結(jié)構(gòu)示意圖；

圖7是圖6中解析模塊的結(jié)構(gòu)示意圖；

圖8是圖6中頁面繪制模塊的結(jié)構(gòu)示意圖。

具體實(shí)施方式

體現(xiàn)本發(fā)明特征與優(yōu)點(diǎn)的典型實(shí)施方式將在以下的說明中詳細(xì)敘述。應(yīng)理解的是本發(fā)明能夠在不同的實(shí)施方式上具有各種的變化，其皆不脫離本發(fā)明的范圍，且其中的說明及圖示在本質(zhì)上是當(dāng)作說明之用，而非用以限制本發(fā)明。

如前所述的，各種頁面訪問的實(shí)現(xiàn)越來越多地發(fā)生于移動(dòng)終端，與之相對應(yīng)的，移動(dòng)端頁面的實(shí)現(xiàn)也將成為開發(fā)所需要考慮的重要方面，任一頁面訪問的實(shí)現(xiàn)都需要充分考慮移動(dòng)終端中的實(shí)現(xiàn)。而現(xiàn)有動(dòng)態(tài)頁面的實(shí)現(xiàn)存在著占用較多傳輸資源和系統(tǒng)資源的缺陷，無法實(shí)現(xiàn)動(dòng)態(tài)頁面的快速加載。

相比各種電腦設(shè)備，對于動(dòng)態(tài)頁面的加載而言移動(dòng)終端存在著諸多限制，例如，其處理性能較差，瀏覽器或者請求進(jìn)行頁面訪問的應(yīng)用所具備的解析性能較差等。由此將導(dǎo)致現(xiàn)有的動(dòng)態(tài)頁面在移動(dòng)終端的實(shí)現(xiàn)存在著各種困難，缺乏通用性。

因此，為確保動(dòng)態(tài)頁面在移動(dòng)終端中的實(shí)現(xiàn)，特提出了一種動(dòng)態(tài)頁面加載方法，該動(dòng)態(tài)頁面加載方法由計(jì)算機(jī)程序?qū)崿F(xiàn)，與之相對應(yīng)的，所構(gòu)建的實(shí)現(xiàn)動(dòng)態(tài)頁面加載的裝置則被存儲于帶有屏幕的終端設(shè)備中，以在終端設(shè)備中運(yùn)行，進(jìn)而實(shí)現(xiàn)動(dòng)態(tài)頁面的加載。

需要說明的是，該終端設(shè)備包括但并不僅限于移動(dòng)終端。

圖1示出了本發(fā)明實(shí)施例提供的一種終端設(shè)備的結(jié)構(gòu)。該終端設(shè)備100只是一個(gè)適用本發(fā)明的示例，不能認(rèn)為是提供了對本發(fā)明的使用范圍的任何限制。該終端設(shè)備100也不能解釋為需要依賴于或具有圖示的示例性的終端設(shè)備100中的一個(gè)或者多個(gè)部件的組合。

如圖1所示，終端設(shè)備100包括處理器110、存儲器120和系統(tǒng)總線130。包括存儲器120和處理器110在內(nèi)的各種部件將連接到系統(tǒng)總線130上。處 理器110是一個(gè)用于通過計(jì)算機(jī)系統(tǒng)中基本的算術(shù)和邏輯運(yùn)算來執(zhí)行計(jì)算機(jī)程序指令的硬件。存儲器120是一個(gè)用于臨時(shí)或永久性存儲計(jì)算機(jī)程序或數(shù)據(jù)的物理設(shè)備。

其中，存儲器120中存儲了程序指令；處理器110將執(zhí)行存儲器120中的程序指令，偵聽輸入的各種操作，并對偵聽得到的操作進(jìn)行響應(yīng)。

終端設(shè)備100還包括各種輸入接口170、輸入裝置140，以實(shí)現(xiàn)各種操作的輸入。其中，該輸入裝置140可以是觸摸屏幕、按鍵、鍵盤和鼠標(biāo)等至少一種。

終端設(shè)備100還包括存儲設(shè)備180，存儲設(shè)備180可以從多種計(jì)算機(jī)可讀存儲介質(zhì)中選擇，計(jì)算機(jī)可讀存儲介質(zhì)是指可以進(jìn)行訪問的任何可利用的介質(zhì)，包括移動(dòng)的和固定的兩種介質(zhì)。例如，計(jì)算機(jī)可讀存儲介質(zhì)，包括但不限于閃速存儲器(微型SD卡)、CD-ROM、數(shù)字通用光盤(DVD)或其它光盤、磁帶盒、磁帶存儲或其它存儲設(shè)備、或者可用于存儲所需信息并可訪問的任何其它介質(zhì)。

如上面所詳細(xì)描述的，適用本發(fā)明的終端設(shè)備100將執(zhí)行實(shí)現(xiàn)動(dòng)態(tài)頁面加載的指定操作，即通過處理器110運(yùn)行存儲器120中的程序指令的形式執(zhí)行該指定操作，以實(shí)現(xiàn)動(dòng)態(tài)頁面的加載。

此外，通過硬件電路或者硬件電路結(jié)合軟件指令也能同樣實(shí)現(xiàn)本發(fā)明，因此，實(shí)現(xiàn)本發(fā)明并不限于任何特定硬件電路、軟件以及兩者的組合。

在一個(gè)實(shí)施例中，具體的，動(dòng)態(tài)頁面加載方法如圖2所示，包括：

步驟210，通過動(dòng)態(tài)頁面訪問的觸發(fā)請求獲取頁面文件。

動(dòng)態(tài)頁面的訪問是在用戶側(cè)觸發(fā)的，其可通過用戶側(cè)的瀏覽器或者運(yùn)行的其它應(yīng)用觸發(fā)。具體的，通過瀏覽器中進(jìn)行的網(wǎng)頁地址跳轉(zhuǎn)觸發(fā)，或者運(yùn)行的應(yīng)用中通過動(dòng)態(tài)頁面的跳轉(zhuǎn)觸發(fā)的。例如，社交應(yīng)用中，通過用戶所進(jìn)行的二維碼掃描進(jìn)行頁面跳轉(zhuǎn)，以觸發(fā)動(dòng)態(tài)頁面的訪問。

該動(dòng)態(tài)頁面可以是當(dāng)前所期望訪問的任意具備動(dòng)態(tài)效果的頁面，在觸發(fā)進(jìn)行動(dòng)態(tài)頁面的訪問之后，將向遠(yuǎn)端發(fā)起請求，以獲取得到返回的頁面文件。

所得到的頁面文件是與請求訪問的動(dòng)態(tài)頁面相對應(yīng)的，其作為動(dòng)態(tài)頁面中內(nèi)容的載體，用以實(shí)現(xiàn)動(dòng)態(tài)頁面在用戶側(cè)的內(nèi)容顯示。

步驟230，解析頁面文件得到動(dòng)態(tài)頁面對應(yīng)的標(biāo)簽和描述標(biāo)簽的樣式描 述信息。

由頁面文件可得到至少兩個(gè)標(biāo)簽以及每一標(biāo)簽對應(yīng)的樣式描述信息，樣式描述信息用以進(jìn)行標(biāo)簽的描述。由頁面文件所解析得到的標(biāo)簽將分別對應(yīng)于動(dòng)態(tài)頁面中包含的元素，相應(yīng)的樣式描述信息被應(yīng)用于對應(yīng)的元素上，以為元素實(shí)現(xiàn)一定的顯示效果。

進(jìn)一步的，頁面文件的解析將是由瀏覽器內(nèi)核所實(shí)現(xiàn)的。移動(dòng)終端等終端設(shè)備中，瀏覽器和應(yīng)用均內(nèi)置了瀏覽器內(nèi)核，所需要進(jìn)行的動(dòng)態(tài)頁面訪問只需要觸發(fā)運(yùn)行該瀏覽器內(nèi)核即可進(jìn)行動(dòng)態(tài)頁面的加載。

步驟250，根據(jù)標(biāo)簽進(jìn)行動(dòng)態(tài)頁面繪制，以進(jìn)行標(biāo)簽分別對應(yīng)的遮罩元素和動(dòng)畫元素的顯示。

按照解析所得到的標(biāo)簽進(jìn)行動(dòng)態(tài)頁面的繪制，以確定動(dòng)態(tài)頁面中包含的元素以及每一元素在屏幕中的布設(shè)情況，從而所有元素以及其在屏幕中的布設(shè)便形成的動(dòng)態(tài)頁面中的顯示內(nèi)容。

通過動(dòng)態(tài)頁面繪制，使得在屏幕中完成各元素的渲染，該渲染顯示的元素至少包括了遮罩元素和動(dòng)畫元素。

其中，遮罩元素將作為遮罩層進(jìn)行顯示，其是靜態(tài)的；而動(dòng)畫元素則用于提供動(dòng)態(tài)變化的顯示內(nèi)容。

步驟270，在遮罩元素和動(dòng)畫元素上執(zhí)行對應(yīng)的樣式描述信息，以得到動(dòng)態(tài)頁面。

將樣式描述信息應(yīng)用到相應(yīng)的元素上，為元素實(shí)現(xiàn)各種顯示效果。具體的，根據(jù)對應(yīng)的樣式描述信息，將遮罩元素設(shè)置為動(dòng)態(tài)頁面中的遮罩層，置于頂層且進(jìn)行靜態(tài)顯示，所占據(jù)的位置將遮蓋該位置所存在的其它內(nèi)容。

另一方面的，對于動(dòng)畫元素，也將在其上執(zhí)行對應(yīng)的樣式描述信息，以實(shí)現(xiàn)動(dòng)畫元素中內(nèi)容的動(dòng)態(tài)變化。

由此將在遮罩元素和動(dòng)畫元素的配合下，遮罩元素置于最上層，動(dòng)態(tài)元素在遮罩元素下進(jìn)行動(dòng)態(tài)變化，進(jìn)而使得觸發(fā)動(dòng)態(tài)頁面訪問的瀏覽器或應(yīng)用得以對此進(jìn)行顯示，并產(chǎn)生意想不到的動(dòng)畫效果。

此外，通過頁面文件的解析來得到遮罩元素和動(dòng)畫元素所形成的動(dòng)態(tài)頁面，并不需要額外的插件或者強(qiáng)大的硬件性能，從而使得動(dòng)態(tài)頁面可在諸如電腦設(shè)備、移動(dòng)終端中隨意實(shí)現(xiàn)，增強(qiáng)了動(dòng)態(tài)頁面加載的通用性和兼容性， 避免出現(xiàn)低級別瀏覽器中無法實(shí)現(xiàn)動(dòng)態(tài)效果的情況發(fā)生。

進(jìn)一步的，在本實(shí)施例中，頁面文件包括腳本文件和關(guān)聯(lián)的CSS文件，該步驟230如圖3所示，包括：

步驟231，解析腳本文件得到動(dòng)態(tài)頁面對應(yīng)的標(biāo)簽，該標(biāo)簽中標(biāo)示出關(guān)聯(lián)的CSS文件。

如前所述的，頁面文件作為動(dòng)態(tài)頁面中內(nèi)容的載體，包括了腳本文件和關(guān)聯(lián)的CSS(Cascading Style Sheets，層疊樣式表)文件兩部分，其中，腳本文件用以實(shí)現(xiàn)頁面中各元素的布局，以提供頁面的顯示內(nèi)容，而關(guān)聯(lián)的CSS文件則為頁面中的各元素實(shí)現(xiàn)了所需要的顯示效果。

具體的，元素作為頁面中的內(nèi)容，其在腳本文件中是以標(biāo)簽的形式存在的，也就是說，通過腳本文件中的標(biāo)簽，將對頁面中的元素進(jìn)行了描述，進(jìn)而得以通過腳本文件實(shí)現(xiàn)頁面中各元素的布局。

例如，標(biāo)簽中標(biāo)示了其所使用的圖片以及獲取該圖片的路徑，以便于在后續(xù)頁面繪制的過程中得以通過該圖片的路徑獲取得到相應(yīng)的圖片。

另外，對于腳本文件中的各標(biāo)簽，其也標(biāo)示了關(guān)聯(lián)的CSS文件，這一關(guān)聯(lián)的CSS文件是對相應(yīng)元素的樣式描述。

由此將使得進(jìn)行動(dòng)態(tài)頁面加載的瀏覽器或者應(yīng)用得以通過腳本文件得到元素在頁面中的布局，并由關(guān)聯(lián)的CSS文件實(shí)現(xiàn)元素的顯示效果，進(jìn)而使得動(dòng)態(tài)頁面的實(shí)現(xiàn)簡易，不需要占用較多資源。

步驟233，根據(jù)標(biāo)簽解析關(guān)聯(lián)的CSS文件得到描述標(biāo)簽的樣式描述信息。

在解析得到動(dòng)態(tài)頁面對應(yīng)的標(biāo)簽之后，讀取標(biāo)簽中關(guān)聯(lián)的CSS文件，進(jìn)而由CSS文件得到描述標(biāo)簽的樣式描述信息。

如上所述的解析過程即為腳本文件中標(biāo)簽與樣式描述信息的匹配過程，由于樣式描述信息是由CSS文件所得到的，相對其它的一些實(shí)現(xiàn)方式，CSS文件所實(shí)現(xiàn)的動(dòng)態(tài)頁面加載占用的內(nèi)存較少，并且均由瀏覽器或者應(yīng)用中運(yùn)行的瀏覽器內(nèi)核完成，因此極大地提高了效率，且其潛在的性以有優(yōu)越，能夠滿足后續(xù)發(fā)展的需求。

進(jìn)一步的，在一個(gè)實(shí)施例中，如上所述的步驟250如圖4所示，包括：

步驟251，根據(jù)標(biāo)簽相對屏幕進(jìn)行元素布局，以得到顯示的元素及其相對屏幕的位置，顯示的元素包括遮罩元素和動(dòng)畫元素。

通過由腳本文件所解析得到的標(biāo)簽將得到頁面中包含的元素以及每一元素相對屏幕的位置。其中，該元素實(shí)質(zhì)為實(shí)現(xiàn)某些內(nèi)容顯示的圖片，例如，如若動(dòng)態(tài)頁面中存在著文字內(nèi)容的顯示，則文字內(nèi)容所對應(yīng)的字圖形圖像即為此動(dòng)態(tài)頁面中的元素，而并且通過腳本文件的相應(yīng)標(biāo)簽實(shí)現(xiàn)其在頁面中的顯示。

動(dòng)態(tài)頁面中顯示的元素至少包括遮罩元素和動(dòng)畫元素，以保證其動(dòng)態(tài)效果的實(shí)現(xiàn)。遮罩元素將作為動(dòng)畫元素的遮罩層，通過動(dòng)畫元素實(shí)現(xiàn)動(dòng)態(tài)顯示效果的同時(shí)，由于遮罩元素是在動(dòng)畫元素之上靜止不動(dòng)的表層，將極大地突顯了動(dòng)態(tài)顯示效果，優(yōu)化了動(dòng)態(tài)頁面。

具體的，對于實(shí)際的動(dòng)態(tài)頁面加載的實(shí)現(xiàn)，該元素實(shí)際為一圖像或都一系列圖像的集合，通過標(biāo)簽中標(biāo)示的路徑即可讀取得到，并相應(yīng)得到其布局在屏幕中的位置。

步驟253，按照相對屏幕的位置進(jìn)行元素的顯示，以使遮罩元素和動(dòng)畫元素顯示于屏幕中。

每一元素都有其相對屏幕的位置，以用于對元素在屏幕中的顯示進(jìn)行控制。通過瀏覽器內(nèi)核在屏幕中渲染各元素，以得到包含了各種內(nèi)容的頁面。

進(jìn)一步的，在一個(gè)實(shí)施例中，動(dòng)畫元素對應(yīng)的樣式描述信息包括將元素設(shè)置為背景的屬性，步驟253的具體過程為：

按照相對屏幕的位置，在屏幕中以動(dòng)畫元素為背景進(jìn)行動(dòng)畫元素和遮罩元素的動(dòng)態(tài)頁面顯示，以使屏幕的顯示中遮罩元素遮罩下方的動(dòng)畫元素。

通過將動(dòng)畫元素設(shè)置為背景的屬性，在頁面繪制的過程中將動(dòng)畫元素置為動(dòng)態(tài)頁面中的背景圖像，以得到背景內(nèi)容能夠進(jìn)行動(dòng)態(tài)變化的動(dòng)態(tài)頁面。其中，將元素設(shè)置為背景的屬性為CSS3的background-image屬性。

具體的，在由標(biāo)簽得到顯示的元素以及每一元素相對屏幕的位置之后，將動(dòng)畫元素作為背景圖像，并在此背景圖像上布設(shè)遮罩元素，使得瀏覽器或者應(yīng)用的顯示中，各種動(dòng)畫畫面在遮罩元素下展示。

另外，此背景圖像上除了布設(shè)遮罩元素之外，其根據(jù)需要，還可布設(shè)其它的一些元素，以提供內(nèi)容豐富，且顯示效果豐富的動(dòng)態(tài)頁面，在此不進(jìn)行限定。

在另一個(gè)實(shí)施例中，遮罩元素對應(yīng)的樣式描述信息為CSS遮罩屬性，動(dòng) 畫元素對應(yīng)的樣式描述信息為動(dòng)畫屬性，因此，步驟270的具體過程為：

顯示的遮罩元素和動(dòng)畫元素中，將CSS遮罩屬性應(yīng)用于遮罩元素，動(dòng)畫屬性應(yīng)用于動(dòng)畫元素，以得到相對遮罩元素進(jìn)行動(dòng)態(tài)變化的動(dòng)態(tài)頁面。

CSS遮罩屬性是運(yùn)用CSS3的最新屬性mask-image，以為動(dòng)態(tài)頁面提供基于像素級別的遮罩層，進(jìn)而也能進(jìn)行透明度的控制。

動(dòng)態(tài)頁面的實(shí)現(xiàn)中，通過CSS的應(yīng)用極大地提高了處理速度，并且使得動(dòng)態(tài)頁面在移動(dòng)終端中的實(shí)現(xiàn)能夠得到移動(dòng)終端中瀏覽器內(nèi)核的支持，具有較佳的性能和兼容性，對于移動(dòng)終端中低級別的瀏覽器內(nèi)核也能夠得到支持。

另一方面的，動(dòng)畫屬性可以是CSS3動(dòng)畫的animation屬性，其定義了動(dòng)畫名稱、持續(xù)時(shí)間、關(guān)鍵幀、完成頁面加載后動(dòng)畫延遲運(yùn)行的時(shí)間以及所應(yīng)用的元素等。換而言之，動(dòng)畫屬性是定義了動(dòng)畫元素中指定圖像的動(dòng)態(tài)變化執(zhí)行方法。

例如，對于作為動(dòng)態(tài)頁面中背景圖像的動(dòng)畫屬性而言，其就是一個(gè)動(dòng)態(tài)變化背景圖像的執(zhí)行方法，瀏覽器或者應(yīng)用中加載并顯示的動(dòng)態(tài)頁面中背景圖像就是按照該方法進(jìn)行動(dòng)態(tài)變化的。

在實(shí)際運(yùn)營中，將CSS遮罩屬性與background-imagent聯(lián)合使用，所得到的動(dòng)態(tài)頁面能夠通過背景圖像漸變的方式進(jìn)行動(dòng)畫效果的展現(xiàn)，實(shí)現(xiàn)簡單但能夠得到不錯(cuò)的顯示效果。

下面結(jié)合一個(gè)具體的實(shí)施例來說闡述如上所述的動(dòng)態(tài)頁面加載方法。該實(shí)施例中，如圖5所示，所實(shí)現(xiàn)的動(dòng)態(tài)頁面將是背景圖像的位置改變作為動(dòng)態(tài)顯示效果的，而“天橋老奶奶”的字圖形圖像310于此位置改變的背景圖像330上，且靜止不動(dòng)。

在此實(shí)現(xiàn)中，將運(yùn)用CSS遮罩屬性和CSS3動(dòng)畫的animation屬性來實(shí)現(xiàn)，以在“天橋老奶奶”的字圖形圖像310背后改變背景圖像330的位置，例如，進(jìn)行從上往下的移動(dòng)。

對于此動(dòng)態(tài)頁面的頁面文件，首先，將“天橋老奶奶”的字圖形切出，得到“天橋老奶奶”的字圖形圖像310以及對應(yīng)的圖像地址，以封裝至頁面文件的標(biāo)簽中。

在這個(gè)標(biāo)簽中應(yīng)用CSS遮罩屬性，其具體的示例可如下所示：

-webkit-mask-image:url(img/images/section6-title.png？)；

mask-image:url(img/images/section6-title.png？)；

其中，由于有的低級別瀏覽器內(nèi)核還需要-webkit-前綴的寫法，因此，在此將提供兩種示例以便說明。

然而在背景圖像330的標(biāo)簽中應(yīng)用動(dòng)畫屬性，具體的示例如下所示：

-webkit-animation:bgTrans 3.5s both；

animation:bgTrans 3.5s both；

-webkit-animation-delay:.5s；

animation-delay:.5s；

如前所述的，對于動(dòng)畫屬性，也將提供兩種示例來進(jìn)行說明。

在此動(dòng)畫屬性中，定義了應(yīng)用的動(dòng)畫名是bgTrans以及該動(dòng)畫執(zhí)行所相關(guān)的信息。

其中，對于動(dòng)畫bgTrans而言，其實(shí)質(zhì)為一個(gè)改變背景圖像330位置的方法，該方法進(jìn)行了關(guān)鍵幀以及時(shí)間幀的定義，具體如下示例：

通過如上所述的示例，可實(shí)現(xiàn)輕量級的移動(dòng)端動(dòng)態(tài)頁面，并且能夠支持 移動(dòng)終端中的瀏覽器和應(yīng)用所使用的webkit內(nèi)核。

進(jìn)而由如上所述的示例生成動(dòng)態(tài)頁面的頁面文件，以供后續(xù)使用。

在一個(gè)實(shí)施例中，還相應(yīng)地提供了一種動(dòng)態(tài)頁面加載裝置，如圖6所示，該裝置包括請求發(fā)起模塊410、解析模塊430、頁面繪制模塊450和效果實(shí)現(xiàn)模塊470，其中：

請求發(fā)起模塊410，用于通過動(dòng)態(tài)頁面訪問的觸發(fā)請求獲取頁面文件。

解析模塊430，用于解析頁面文件得到動(dòng)態(tài)頁面對應(yīng)的標(biāo)簽和描述標(biāo)簽的樣式描述信息。

頁面繪制模塊450，用于根據(jù)標(biāo)簽進(jìn)行動(dòng)態(tài)頁面繪制，以進(jìn)行標(biāo)簽分別對應(yīng)的遮罩元素和動(dòng)畫元素的顯示。

效果實(shí)現(xiàn)模塊470，用于在遮罩元素和動(dòng)畫元素上執(zhí)行對應(yīng)的樣式描述信息，以得到動(dòng)態(tài)頁面。

進(jìn)一步的，在本實(shí)施例中，頁面文件包括腳本文件和關(guān)聯(lián)的CSS文件，解析模塊430如圖7所示，包括腳本解析單元431和關(guān)聯(lián)解析單元433，其中：

腳本解析單元431，用于解析腳本文件得到動(dòng)態(tài)頁面對應(yīng)的標(biāo)簽，標(biāo)簽中標(biāo)示出關(guān)聯(lián)的CSS文件。

關(guān)聯(lián)解析單元433，用于根據(jù)標(biāo)簽解析關(guān)聯(lián)的CSS文件得到描述標(biāo)簽的樣式描述信息。

進(jìn)一步的，在本實(shí)施例中，頁面繪制模塊450如圖8所示，包括元素布局單元451和顯示單元453，其中：

元素布局單元451，用于根據(jù)標(biāo)簽相對屏幕進(jìn)行元素布局，以得到顯示的元素及其相對屏幕的位置，顯示的元素包括遮罩元素和動(dòng)畫元素。

顯示單元453，用于按照相對屏幕的位置進(jìn)行元素的顯示，以使遮罩元素和動(dòng)畫元素顯示于屏幕中。

在一個(gè)實(shí)施例中，動(dòng)畫元素對應(yīng)的樣式描述信息包括將元素設(shè)置為背景的屬性，顯示單元453進(jìn)一步用于按照相對屏幕的位置，在屏幕中以動(dòng)畫元素為背景進(jìn)行動(dòng)畫元素和遮罩元素的顯示，以使屏幕的顯示中所遮罩元素遮罩下方的動(dòng)畫元素。

在另一個(gè)實(shí)施例中，遮罩元素對應(yīng)的樣式描述信息為CSS遮罩屬性，動(dòng) 畫元素對應(yīng)的樣式描述信息為動(dòng)畫屬性，效果實(shí)現(xiàn)模塊進(jìn)一步用于顯示的遮罩元素和動(dòng)畫元素中，將CSS遮罩屬性應(yīng)用于遮罩元素，動(dòng)畫屬性應(yīng)用于動(dòng)畫元素，以得到相對遮罩元素進(jìn)行動(dòng)態(tài)變化的動(dòng)態(tài)頁面。

本領(lǐng)域普通技術(shù)人員可以理解實(shí)現(xiàn)上述實(shí)施例的全部或部分步驟可以通過硬件來完成，也可以通過程序來指令相關(guān)的硬件完成，所述的程序可以存儲于一種計(jì)算機(jī)可讀存儲介質(zhì)中，上述提到的存儲介質(zhì)可以是只讀存儲器，磁盤或光盤等。

雖然已參照幾個(gè)典型實(shí)施方式描述了本發(fā)明，但應(yīng)當(dāng)理解，所用的術(shù)語是說明和示例性、而非限制性的術(shù)語。由于本發(fā)明能夠以多種形式具體實(shí)施而不脫離發(fā)明的精神或?qū)嵸|(zhì)，所以應(yīng)當(dāng)理解，上述實(shí)施方式不限于任何前述的細(xì)節(jié)，而應(yīng)在隨附權(quán)利要求所限定的精神和范圍內(nèi)廣泛地解釋，因此落入權(quán)利要求或其等效范圍內(nèi)的全部變化和改型都應(yīng)為隨附權(quán)利要求所涵蓋。