一種網(wǎng)頁(yè)資源異步加載的方法及裝置的制造方法
【技術(shù)領(lǐng)域】
[0001]本發(fā)明涉及網(wǎng)頁(yè)加載技術(shù)領(lǐng)域，尤其涉及一種網(wǎng)頁(yè)資源異步加載的方法及裝置。
【背景技術(shù)】
[0002]隨著網(wǎng)絡(luò)技術(shù)的快速發(fā)展，網(wǎng)絡(luò)內(nèi)容越來(lái)越豐富，網(wǎng)頁(yè)中除了文字還會(huì)嵌入各種各樣的圖片。客戶端的瀏覽器在訪問(wèn)網(wǎng)頁(yè)時(shí)，除了加載網(wǎng)頁(yè)中的文字，還需要加載網(wǎng)頁(yè)中的圖片。同時(shí)，在很多網(wǎng)頁(yè)中，圖片文件所占的比重也越來(lái)也大，且圖片文件的尺寸通常都比較大，因此大量的圖片文件會(huì)嚴(yán)重影響網(wǎng)頁(yè)的加載速度。
[0003]現(xiàn)有網(wǎng)頁(yè)加載的方法是:網(wǎng)頁(yè)加載和被刷新的時(shí)候，除了圖片之外的內(nèi)容(文字和布局等)和圖片是一起加載，圖片的地址放在HTML代碼中，逐一去請(qǐng)求，完整加載之后，再整體顯示。具體的，在網(wǎng)頁(yè)的HTML代碼中，在顯示區(qū)域部分，按照傳統(tǒng)方式，是寫(xiě)入圖片的地址例如:* jpg，src: ****，這樣在加載頁(yè)面時(shí)，必須去請(qǐng)求這些照片才能完整實(shí)現(xiàn)整個(gè)頁(yè)面。如果某個(gè)圖片無(wú)法加載，會(huì)出現(xiàn)網(wǎng)頁(yè)加載不下去的情況;而且如果圖片比較大，加載速度會(huì)比較慢。

【發(fā)明內(nèi)容】

[0004]本發(fā)明實(shí)施例提供一種網(wǎng)頁(yè)資源異步加載的方法及裝置，用于解決現(xiàn)有網(wǎng)頁(yè)加載方法速度慢的技術(shù)問(wèn)題。
[0005]本發(fā)明實(shí)施例提供的一種網(wǎng)頁(yè)資源異步加載的方法，包括以下步驟:
[0006]獲取網(wǎng)頁(yè)代碼，網(wǎng)頁(yè)本代碼包括網(wǎng)頁(yè)框架信息和圖片信息，圖片信息中包含相應(yīng)圖片資源的地址；
[0007]調(diào)用第一進(jìn)程，根據(jù)網(wǎng)頁(yè)框架信息加載網(wǎng)頁(yè)框架，并確定網(wǎng)頁(yè)框架中的圖片顯示位置；
[0008]調(diào)用第二進(jìn)程，根據(jù)圖片信息確定圖片資源的地址，根據(jù)圖片資源的地址獲取圖片資源，并在確定網(wǎng)頁(yè)框架中的圖片顯示位置之后，將圖片資源加載于相應(yīng)的圖片顯示位置處;第一進(jìn)程和第二進(jìn)程為異步處理的進(jìn)程。
[0009]本發(fā)明實(shí)施例中，圖片的地址隱藏在圖片的屬性中，由不同于第一進(jìn)程的第二進(jìn)程執(zhí)行加載操作。即，第一進(jìn)程和第二進(jìn)程為異步處理的進(jìn)程，兩個(gè)進(jìn)程為相互獨(dú)立、異步處理網(wǎng)頁(yè)加載的進(jìn)程。具體的，第二進(jìn)程用于根據(jù)圖片資源的地址獲取圖片資源，同時(shí)根據(jù)第一進(jìn)程確定的圖片顯示位置，將圖片資源加載于相應(yīng)的圖片顯示位置處。
[0010]在上述技術(shù)方案中，在確定網(wǎng)頁(yè)框架中的圖片顯示位置步驟之后，還包括:
[0011]在圖片顯示位置處加載預(yù)先設(shè)置的本地資源；
[0012]在根據(jù)圖片資源的地址獲取圖片資源之后，將本地資源替換為圖片資源。
[0013]在上述技術(shù)方案中，根據(jù)圖片資源的地址獲取圖片資源，包括:
[0014]在包含多個(gè)圖片資源時(shí)，分別根據(jù)圖片資源的地址同時(shí)獲取圖片資源。
[0015]在上述技術(shù)方案中，根據(jù)圖片資源的地址獲取圖片資源，包括:
[0016]根據(jù)圖片資源在網(wǎng)頁(yè)框架中的圖片顯示位置，分別確定圖片資源的圖片顯示位置與網(wǎng)頁(yè)框架頂端之間的距離值；
[0017]按照距離值從小到大的順序加載圖片資源。
[0018]在上述技術(shù)方案中，網(wǎng)頁(yè)框架信息包括網(wǎng)頁(yè)文字信息和網(wǎng)頁(yè)布局信息。
[0019]基于同樣的發(fā)明構(gòu)思，本發(fā)明實(shí)施例還提供一種網(wǎng)頁(yè)資源異步加載的裝置，包括:
[0020]獲取模塊，用于獲取網(wǎng)頁(yè)代碼，網(wǎng)頁(yè)代碼包括網(wǎng)頁(yè)框架信息和圖片信息，圖片信息中包含相應(yīng)圖片資源的地址；
[0021]第一加載模塊，用于調(diào)用第一進(jìn)程，根據(jù)網(wǎng)頁(yè)框架信息加載網(wǎng)頁(yè)框架，并確定網(wǎng)頁(yè)框架中的圖片顯示位置；
[0022]第二加載模塊，用于調(diào)用第二進(jìn)程，根據(jù)圖片信息確定圖片資源的地址，根據(jù)圖片資源的地址獲取圖片資源，并在第一加載模塊確定網(wǎng)頁(yè)框架中的圖片顯示位置之后，將圖片資源加載于相應(yīng)的圖片顯示位置處。
[0023]在上述技術(shù)方案中，還包括:
[0024]第三加載模塊，用于在第一加載模塊確定網(wǎng)頁(yè)框架中的圖片顯示位置之后，在圖片顯示位置處加載預(yù)先設(shè)置的本地資源；
[0025]替換模塊，用于在根據(jù)圖片資源的地址獲取圖片資源之后，將本地資源替換為圖片資源。
[0026]在上述技術(shù)方案中，第二加載模塊具體用于:
[0027]在包含多個(gè)圖片資源時(shí)，分別根據(jù)圖片資源的地址同時(shí)獲取圖片資源。
[0028]在上述技術(shù)方案中，第二加載模塊包括:
[0029]確定單元，用于根據(jù)圖片資源在網(wǎng)頁(yè)框架中的圖片顯示位置，分別確定圖片資源的圖片顯示位置與網(wǎng)頁(yè)框架頂端之間的距離值；
[0030]加載單元，用于按照距離值從小到大的順序加載圖片資源。
[0031]在上述技術(shù)方案中，網(wǎng)頁(yè)框架信息包括網(wǎng)頁(yè)文字信息和網(wǎng)頁(yè)布局信息。
[0032]本發(fā)明實(shí)施例提供的一種網(wǎng)頁(yè)資源異步加載的方法及裝置，圖片的地址隱藏在圖片的屬性中，由不同于第一進(jìn)程的第二進(jìn)程執(zhí)行加載操作。即，第一進(jìn)程和第二進(jìn)程為異步處理的進(jìn)程，兩個(gè)進(jìn)程為相互獨(dú)立、異步處理網(wǎng)頁(yè)加載的進(jìn)程。具體的，第二進(jìn)程用于根據(jù)圖片資源的地址獲取圖片資源，同時(shí)根據(jù)第一進(jìn)程確定的圖片顯示位置，將圖片資源加載于相應(yīng)的圖片顯示位置處。通過(guò)在為獲取到圖片資源時(shí)，以本地資源暫時(shí)性代替顯示，可以迅速將網(wǎng)頁(yè)框架顯示給用戶。同時(shí)，根據(jù)圖片資源的尺寸選取相匹配的本地資源，在該本地資源與圖片資源的尺寸相同時(shí)，即使圖片資源未加載完成，該網(wǎng)頁(yè)框架的顯示也不會(huì)發(fā)生變化，從而可以使得用戶比較準(zhǔn)確的定位到框架的某一位置。先加載網(wǎng)頁(yè)最上端的圖片，從而可以將網(wǎng)頁(yè)最上端的圖片向用戶顯示，符合用戶瀏覽網(wǎng)頁(yè)的習(xí)慣。
[0033]本發(fā)明的其它特征和優(yōu)點(diǎn)將在隨后的說(shuō)明書(shū)中闡述，并且，部分地從說(shuō)明書(shū)中變得顯而易見(jiàn)，或者通過(guò)實(shí)施本發(fā)明而了解。本發(fā)明的目的和其他優(yōu)點(diǎn)可通過(guò)在所寫(xiě)的說(shuō)明書(shū)、權(quán)利要求書(shū)、以及附圖中所特別指出的結(jié)構(gòu)來(lái)實(shí)現(xiàn)和獲得。
[0034]下面通過(guò)附圖和實(shí)施例，對(duì)本發(fā)明的技術(shù)方案做進(jìn)一步的詳細(xì)描述。
【附圖說(shuō)明】
[0035]附圖用來(lái)提供對(duì)本發(fā)明的進(jìn)一步理解，并且構(gòu)成說(shuō)明書(shū)的一部分，與本發(fā)明的實(shí)施例一起用于解釋本發(fā)明，并不構(gòu)成對(duì)本發(fā)明的限制。在附圖中:
[0036]圖1為本發(fā)明實(shí)施例中網(wǎng)頁(yè)資源異步加載的方法流程圖；
[0037]圖2為本發(fā)明實(shí)施例中加載本地資源的方法流程圖；
[0038]圖3為本發(fā)明實(shí)施例中根據(jù)圖片資源的地址獲取圖片資源的方法流程圖；
[0039]圖4為本發(fā)明實(shí)施例一中網(wǎng)頁(yè)資源異步加載的方法流程圖；
[0040]圖5為本發(fā)明實(shí)施例二中網(wǎng)頁(yè)資源異步加載的方法流程圖；
[0041 ]圖6為本發(fā)明實(shí)施例中網(wǎng)頁(yè)資源異步加載的裝置的第一結(jié)構(gòu)圖；
[0042]圖7為本發(fā)明實(shí)施例中網(wǎng)頁(yè)資源異步加載的裝置的第二結(jié)構(gòu)圖；
[0043]圖8為本發(fā)明實(shí)施例中第二加載模塊的結(jié)構(gòu)圖。
【具體實(shí)施方式】
[0044]以下結(jié)合附圖對(duì)本發(fā)明的優(yōu)選實(shí)施例進(jìn)行說(shuō)明，應(yīng)當(dāng)理解，此處所描述的優(yōu)選實(shí)施例僅用于說(shuō)明和解釋本發(fā)明，并不用于限定本發(fā)明。
[0045]參見(jiàn)圖1，本發(fā)明實(shí)施例提供的一種網(wǎng)頁(yè)資源異步加載的方法的流程如下，具體包括步驟101-103:
[0046]步驟101:獲取網(wǎng)頁(yè)代碼，網(wǎng)頁(yè)代碼包括網(wǎng)頁(yè)框架信息和圖片信息，圖片信息中包含相應(yīng)圖片資源的地址。
[0047]本發(fā)明實(shí)施例中，將網(wǎng)頁(yè)代碼分為框架和圖片兩部分，具體包括網(wǎng)頁(yè)框架信息和圖片信息;其中，該網(wǎng)頁(yè)框架信息具體包括網(wǎng)頁(yè)文字信息和網(wǎng)頁(yè)布局信息。
[0048]步驟102:調(diào)用第一進(jìn)程，根據(jù)網(wǎng)頁(yè)框架信息加載網(wǎng)頁(yè)框架，并