專利名稱：在用戶終端瀏覽器上按需顯示圖片的方法及裝置的制作方法
技術(shù)領(lǐng)域：
本發(fā)明涉及通信技術(shù)領(lǐng)域，尤其涉及一種在用戶終端瀏覽器上按需顯示圖片的方法及裝置。
背景技術(shù)：
WEB頁是為適合PC屏幕設(shè)計的，通過手機上網(wǎng)瀏覽WEB頁時屏幕上通常在某一時刻只能顯示屏幕區(qū)域內(nèi)的一部分區(qū)域，其他區(qū)域則要通過移動滾動條后才能顯示。在手機瀏覽器打開TOB頁的過程中，受制于無線網(wǎng)絡(luò)的速度，文件下載占用了大部分時間，尤其是圖片下載占用了下載過程的大部分時間；而現(xiàn)有手機上顯示W(wǎng)EB頁時采用的是一次性排版后再顯示的方法，即手機首先HTML文本以及圖片全部下載下來，排版形成完整的頁面后再計算頁面的可視區(qū)域并顯示，這樣，如果用戶只想看WEB頁的一部分區(qū)域，也不得不同時將其他區(qū)域的圖片同時下載下來，從而造成下載時間的延長以及數(shù)據(jù)流量的浪費。

發(fā)明內(nèi)容
鑒于上述的分析，本發(fā)明旨在提供一種在用戶終端瀏覽器上按需顯示圖片的方法及裝置，用于解決傳統(tǒng)瀏覽器采用一次性排版后顯示所帶來的下載時間延長以及數(shù)據(jù)流量浪費的問題。本發(fā)明的目的主要是通過以下技術(shù)方案實現(xiàn)的本發(fā)明提供了一種在用戶終端瀏覽器上按需顯示圖片的方法，包括步驟A 當用戶終端通過瀏覽器訪問網(wǎng)頁時，瀏覽器對接收到的HTML文本進行解析，并根據(jù)解析結(jié)果以默認圖片的方式對該網(wǎng)頁進行排版；步驟B 計算該網(wǎng)頁的可視區(qū)域并獲取該可視區(qū)域內(nèi)的控件；步驟C 在判定可視區(qū)域的控件中包含有圖像控件并且所有圖像控件都獲得相應的圖片后，繪制可視區(qū)域。進一步地，還包括在該網(wǎng)頁發(fā)生移動后，重新執(zhí)行步驟B和步驟C。進一步地，所述步驟C具體包括判斷該可視區(qū)域內(nèi)是否存在圖像控件，如果是，對該可視區(qū)域內(nèi)存在的圖像控件獲取相應的圖片，加入該圖片并對該網(wǎng)頁重新進行排版，直到該可視區(qū)域內(nèi)存在的所有圖像控件都獲得相應的圖片后繪制可視區(qū)域；如果否，直接繪制可視區(qū)域。本發(fā)明還提供了一種在用戶終端瀏覽器上按需顯示圖片的裝置，包括解析模塊，用于當用戶終端通過瀏覽器訪問網(wǎng)頁時，對接收到的HTML文本進行解析，并根據(jù)解析結(jié)果以默認圖片的方式對該網(wǎng)頁進行排版；計算獲取模塊，用于計算該網(wǎng)頁的可視區(qū)域并獲取該可視區(qū)域內(nèi)的控件；判斷繪制模塊，用于在判定可視區(qū)域的控件中包含有圖像控件并且所有圖像控件都獲得相應的圖片后，繪制可視區(qū)域。進一步地，所述判斷繪制模塊具體用于，判斷該可視區(qū)域內(nèi)是否存在圖像控件，如果是，對該可視區(qū)域內(nèi)存在的圖像控件獲取相應的圖片，加入該圖片并對該網(wǎng)頁重新進行排版，直到該可視區(qū)域內(nèi)存在的所有圖像控件都獲得相應的圖片后繪制可視區(qū)域；如果否， 直接繪制可視區(qū)域。本發(fā)明有益效果如下在用戶只想看TOB頁的一部分區(qū)域時，本發(fā)明通過只下載屏幕范圍內(nèi)的WEB頁圖片，減少了等待WEB頁顯示的時間以及數(shù)據(jù)流量消耗。本發(fā)明的其他特征和優(yōu)點將在隨后的說明書中闡述，并且，部分的從說明書中變得顯而易見，或者通過實施本發(fā)明而了解。本發(fā)明的目的和其他優(yōu)點可通過在所寫的說明書、權(quán)利要求書、以及附圖中所特別指出的結(jié)構(gòu)來實現(xiàn)和獲得。


圖1為本發(fā)明實施例所述方法的流程示意圖；圖2為本發(fā)明實施例所述裝置的流程示意圖。
具體實施例方式下面結(jié)合附圖來具體描述本發(fā)明的優(yōu)選實施例，其中，附圖構(gòu)成本申請一部分，并與本發(fā)明的實施例一起用于闡釋本發(fā)明的原理。首先結(jié)合附圖1對本發(fā)明實施例所述方法進行詳細說明。為了有助于理解本發(fā)明實施例，這里先簡單介紹下現(xiàn)有技術(shù)中TOB頁的形成原理以及手機上顯示顯示W(wǎng)EB頁的原理。網(wǎng)頁形成的原理是，瀏覽器解析HTML文本，形成若干控件和容器?？丶脕盹@示內(nèi)容，例如文本控件顯示文字，圖像控件顯示圖片?？丶胖迷谌萜鲀?nèi)，由容器來計算各個控件的顯示位置，即容器是用來控制排版的。瀏覽器若要顯示某圖片，必須要從圖像控件中獲取圖片URL，向該圖片URL發(fā)出HTTP請求，將圖片下載回來，然后解碼，解碼后的內(nèi)容寫入圖像控件。在圖片還沒有獲取到的情況下，圖像控件顯示為默認圖片(默認圖片為排版時需要給其設(shè)定的特殊標識圖片，例如可以為“ X ”形狀的圖片，這類圖片占用的數(shù)據(jù)流量非常小，可以忽略不計)。手機屏幕上顯示網(wǎng)頁的原理是，瀏覽器設(shè)置屏幕左上角點在網(wǎng)頁上的絕對坐標， 然后根據(jù)屏幕的長度和寬度計算出可視區(qū)域坐標。頁面容器將各個控件坐標與可視區(qū)域坐標進行比較，讓處于可視區(qū)域內(nèi)的控件繪制自身，從而將可視區(qū)域內(nèi)的網(wǎng)頁內(nèi)容顯示給用戶。當瀏覽器收到頁面移動的信息后，會重新設(shè)置屏幕左上角點在網(wǎng)頁上的坐標，從而重新計算可視區(qū)域。如圖1所示，圖1為本發(fā)明實施例所述方法的流程示意圖，具體包括步驟101 在手機上網(wǎng)瀏覽TOB頁時，瀏覽器向服務器發(fā)出HTTP請求，請求由URL 指定的WEB頁對應的HTML文本；其中，HTML文本中包括了整個WEB頁的布局和文字內(nèi)容， 但不包括圖片內(nèi)容；圖片信息是通過HTML中的img標簽中來描述，img標簽中指定了的圖片URL，即img標簽告訴瀏覽器從哪里可以獲取圖片；
4
步驟102 瀏覽器對接收到的HTML文本進行解析，然后根據(jù)解析結(jié)果按照不顯示圖片的方式對WEB頁進行排版；也就是說，對HTML解析形成若干控件和容器，然后由容器來計算各個控件的顯示位置，但是對于其中的圖像控件的下載標識設(shè)置為未下載，這樣排版后生成的WEB頁并不包含圖像控件對應的圖片；步驟103 計算頁面的可視區(qū)域，獲取可視區(qū)域內(nèi)的控件；步驟104 判斷該可視區(qū)域內(nèi)控件中是否包含有圖像控件，如果包含，則執(zhí)行步驟 106，否則執(zhí)行步驟105 ；步驟105 在屏幕繪制該可視區(qū)域，即瀏覽器設(shè)置屏幕左上角點在WEB頁上的絕對坐標，然后根據(jù)屏幕的長度和寬度計算出該可視區(qū)域坐標；步驟106 根據(jù)可視區(qū)域內(nèi)圖像控件的下載標志判斷各個圖像控件是否都已取得相應的圖片，若至少有一個未獲取，則執(zhí)行步驟107 ；若都已獲取到相應的圖片，則轉(zhuǎn)到步驟 105 ；步驟107 瀏覽器請求下載上述未獲取的圖片，下載后將該圖片的內(nèi)容寫入到對應的圖像控件，并將對應的圖像控件的下載標識設(shè)置為已下載；步驟108:加入該圖片并對該TOB頁重新進行排版，然后轉(zhuǎn)到步驟104，直到該可視區(qū)域內(nèi)的所有圖像控件都獲取到相應的圖片。下面用一個具體的場景說明按需顯示圖片的過程，這個場景是某用戶到新浪網(wǎng)上瀏覽英超聯(lián)賽的新聞。1.用戶首先輸入手機瀏覽器上輸入www. sina. com. cn，打開新浪首頁，這時顯示在手機屏幕上的是WEB頁左上角的一小塊區(qū)域，此時瀏覽器只下載了這一小塊區(qū)域內(nèi)的圖片，而WEB頁右部和下部的圖片都沒有被下載。2.用戶按右方向鍵移動WEB頁，在TOB頁的導航區(qū)域中尋找到“英超”鏈接。在這個過程中，WEB頁上部的一部分圖片逐漸進入屏幕范圍，這些圖片在TOB頁移動的過程中被下載并顯示出來。但WEB頁下部的圖片仍然不會被下載。3.用戶點擊“英超”鏈接，瀏覽器打開英超聯(lián)賽板塊首頁，如果該用戶只是在該頁面的上部瀏覽一些英超重要新聞，則頁面中部和下部的圖片在用戶瀏覽過程中始終不會下載。從上面的過程可以看出，用戶在瀏覽TOB頁過程中，完全地獲得了他感興趣的部分(WEB頁上部的內(nèi)容)，而大部分該用戶不關(guān)心的TOB頁圖片(WEB頁下部的圖片)都沒有下載，這樣，那些用戶不需要的圖片就不會占用用戶的下載時間和流量。接下來結(jié)合附圖2對本發(fā)明實施例所述裝置進行詳細說明。如圖2所示，圖2為本發(fā)明實施例所述裝置的結(jié)構(gòu)示意圖，具體可以包括解析模塊、計算獲取模塊和判斷繪制模塊，其中，解析模塊，當用戶終端通過瀏覽器訪問網(wǎng)頁時，解析模塊對接收到的HTML文本進行解析，并根據(jù)解析結(jié)果以默認圖片的方式對該網(wǎng)頁進行排版；計算獲取模塊，負責計算該網(wǎng)頁的可視區(qū)域并獲取該可視區(qū)域內(nèi)的控件；判斷繪制模塊，負責在判定可視區(qū)域的控件中包含有圖像控件并且所有圖像控件都獲得相應的圖片后，繪制可視區(qū)域；具體的說就是，判斷繪制模塊判斷該可視區(qū)域內(nèi)是否存在圖像控件，如果是，對該可視區(qū)域內(nèi)存在的圖像控件獲取相應的圖片，加入該圖片并對
5該網(wǎng)頁重新進行排版，直到該可視區(qū)域內(nèi)存在的所有圖像控件都獲得相應的圖片后繪制可視區(qū)域；如果否，直接繪制可視區(qū)域。對于本發(fā)明實施例所述裝置的具體實施過程，由于上述方法中已有詳細說明，故此處不再贅述。綜述，本發(fā)明實施提供了一種在用戶終端瀏覽器上按需顯示圖片的方法及裝置， 以上僅以手機為例進行了說明，但本領(lǐng)域技術(shù)人員都應該知道，本發(fā)明實施例同樣可以適用于其他具有訪問WEB頁功能且不能全屏顯示W(wǎng)EB頁的其他用戶終端，原理相同。本發(fā)明實施例的瀏覽器只下載屏幕范圍內(nèi)的TOB頁圖片，若用戶只瀏覽了 WEB頁的一部分，等待WEB頁顯示的時間和消耗的數(shù)據(jù)流量都比傳統(tǒng)的方式少得多；并且隨著WEB 頁的移動，落到屏幕范圍內(nèi)的圖片會自動下載和顯示，整個過程不需要用戶干預。以上所述，僅為本發(fā)明較佳的具體實施方式
，但本發(fā)明的保護范圍并不局限于此， 任何熟悉本技術(shù)領(lǐng)域的技術(shù)人員在本發(fā)明揭露的技術(shù)范圍內(nèi)，可輕易想到的變化或替換， 都應涵蓋在本發(fā)明的保護范圍之內(nèi)。因此，本發(fā)明的保護范圍應該以權(quán)利要求書的保護范圍為準。
權(quán)利要求
1.一種在用戶終端瀏覽器上按需顯示圖片的方法，其特征在于，包括步驟A 當用戶終端通過瀏覽器訪問網(wǎng)頁時，瀏覽器對接收到的HTML文本進行解析，并根據(jù)解析結(jié)果以默認圖片的方式對該網(wǎng)頁進行排版；步驟B 計算該網(wǎng)頁的可視區(qū)域并獲取該可視區(qū)域內(nèi)的控件；步驟C 在判定可視區(qū)域的控件中包含有圖像控件并且所有圖像控件都獲得相應的圖片后，繪制可視區(qū)域。
2.根據(jù)權(quán)利要求1所述的方法，其特征在于，還包括在該網(wǎng)頁發(fā)生移動后，重新執(zhí)行步驟B和步驟C。
3.根據(jù)權(quán)利要求1或2所述的方法，其特征在于，所述步驟C具體包括判斷該可視區(qū)域內(nèi)是否存在圖像控件，如果是，對該可視區(qū)域內(nèi)存在的圖像控件獲取相應的圖片，加入該圖片并對該網(wǎng)頁重新進行排版，直到該可視區(qū)域內(nèi)存在的所有圖像控件都獲得相應的圖片后繪制可視區(qū)域；如果否，直接繪制可視區(qū)域。
4.一種在用戶終端瀏覽器上按需顯示圖片的裝置，其特征在于，包括解析模塊，用于當用戶終端通過瀏覽器訪問網(wǎng)頁時，對接收到的HTML文本進行解析， 并根據(jù)解析結(jié)果以默認圖片的方式對該網(wǎng)頁進行排版；計算獲取模塊，用于計算該網(wǎng)頁的可視區(qū)域并獲取該可視區(qū)域內(nèi)的控件；判斷繪制模塊，用于在判定可視區(qū)域的控件中包含有圖像控件并且所有圖像控件都獲得相應的圖片后，繪制可視區(qū)域。
5.根據(jù)權(quán)利要求1或2所述的方法，其特征在于，所述判斷繪制模塊具體用于，判斷該可視區(qū)域內(nèi)是否存在圖像控件，如果是，對該可視區(qū)域內(nèi)存在的圖像控件獲取相應的圖片， 加入該圖片并對該網(wǎng)頁重新進行排版，直到該可視區(qū)域內(nèi)存在的所有圖像控件都獲得相應的圖片后繪制可視區(qū)域；如果否，直接繪制可視區(qū)域。
全文摘要
本發(fā)明公開了一種在用戶終端瀏覽器上按需顯示圖片的方法及裝置，其中方法包括當用戶終端通過瀏覽器訪問網(wǎng)頁時，瀏覽器對接收到的HTML文本進行解析，并根據(jù)解析結(jié)果以默認圖片的方式對該網(wǎng)頁進行排版；計算該網(wǎng)頁的可視區(qū)域并獲取該可視區(qū)域內(nèi)的控件；在判定可視區(qū)域的控件中包含有圖像控件并且所有圖像控件都獲得相應的圖片后，繪制可視區(qū)域；在用戶只想看WEB頁的一部分區(qū)域時，本發(fā)明通過只下載屏幕范圍內(nèi)的WEB頁圖片，減少了等待WEB頁顯示的時間以及數(shù)據(jù)流量消耗。
文檔編號G06F17/30GK102346782SQ201110327238
公開日2012年2月8日 申請日期2011年10月25日 優(yōu)先權(quán)日2011年10月25日
發(fā)明者于峰, 周涌, 壽永艷, 李紅波 申請人:中興通訊股份有限公司