一種展示網(wǎng)頁中目標(biāo)元素的方法及裝置的制造方法
【技術(shù)領(lǐng)域】
[0001]本申請涉及互聯(lián)網(wǎng)技術(shù)領(lǐng)域，尤其涉及一種網(wǎng)頁中目標(biāo)元素的展示方法及裝置。
【背景技術(shù)】
[0002]隨著互聯(lián)網(wǎng)內(nèi)容更加豐富、數(shù)據(jù)傳輸速率更加迅速，從互聯(lián)網(wǎng)獲取信息逐漸成為了獲取信息的首要方式，并且從以前以單純的文字信息為主，變?yōu)榱爽F(xiàn)在以圖像、動畫、音視頻等多媒體信息為主的互聯(lián)網(wǎng)內(nèi)容。
[0003]所有的互聯(lián)網(wǎng)內(nèi)容都需要通過瀏覽器進(jìn)行加載，并最終都要通過可視區(qū)域進(jìn)行展示，可視區(qū)域是指用于展示互聯(lián)網(wǎng)內(nèi)容的區(qū)域。
[0004]然而，瀏覽器在加載網(wǎng)頁內(nèi)容的過程中，不是將所有的網(wǎng)頁元素全部下載完成，并一次性布局在網(wǎng)頁中，再通過可視區(qū)域進(jìn)行展示；而是下載一部分網(wǎng)頁元素，就布局一部分到頁面中，再通過可視區(qū)域進(jìn)行展示。由于傳輸速率、網(wǎng)頁元素數(shù)據(jù)大小等不同原因，在可視區(qū)域中展示的網(wǎng)頁元素順序可能不同于一般的閱讀習(xí)慣。比如，當(dāng)用戶滾動網(wǎng)頁至某一位置時，可視區(qū)域中包含相對在前的圖片元素和相對在后的文字元素，從打開網(wǎng)頁開始同時下載直到下載完成，圖片元素消耗的時間往往要長于文字元素。這就造成了已經(jīng)下載完成的文字元素先進(jìn)行展示，而未下載完成的圖片元素在頁面中占據(jù)很小的區(qū)域以表示圖片元素的位置，但只要圖片元素下載完成，它就會重新占據(jù)實際的行數(shù)(和/或列數(shù))，頁面也會重新布局，這時體現(xiàn)在網(wǎng)頁上就是相對在后的文字元素就會向后移動，從而改變在可視區(qū)域中的位置，甚至?xí)驗橄鄬υ谇暗膱D片元素尺寸過大而滾出可視區(qū)域。可以將用戶期望看到的網(wǎng)頁元素稱為目標(biāo)元素，如果用戶期望看到的目標(biāo)元素是相對在后的文字元素，由于上述情況的出現(xiàn)，就直接影響了瀏覽目標(biāo)元素的效率。此外，也在一定程度上，降低了用戶的體驗。

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

[0005]本申請實施例提供一種展示網(wǎng)頁中目標(biāo)元素的方法，用于提高展示網(wǎng)頁中目標(biāo)元素的效率。
[0006]本申請實施例提供一種展示網(wǎng)頁中目標(biāo)元素的裝置，用于提高展示網(wǎng)頁中目標(biāo)元素的效率。
[0007]本申請實施例采用下述技術(shù)方案:
[0008]—種展示網(wǎng)頁中目標(biāo)元素的方法，包括:確定包含目標(biāo)元素的頁面區(qū)域；查找包含所述頁面區(qū)域的區(qū)域存在的位置可固定的網(wǎng)頁元素；所述位置可固定的網(wǎng)頁元素為在加載網(wǎng)頁過程中該網(wǎng)頁元素的位置相對于可視區(qū)域固定；當(dāng)所述位置可固定的網(wǎng)頁元素在網(wǎng)頁中的位置發(fā)生變化后，以所述位置可固定的網(wǎng)頁元素為基準(zhǔn)，調(diào)整所述頁面區(qū)域使目標(biāo)元素展示在可視區(qū)域中。
[0009]—種展示網(wǎng)頁中目標(biāo)元素的裝置，包括:包括:確定單元、查找單元、判斷單元、調(diào)整單元，其中，所述確定單元，用于確定包含目標(biāo)元素的頁面區(qū)域；所述查找單元，用于查找包含所述頁面區(qū)域的區(qū)域存在的位置可固定的網(wǎng)頁元素；所述位置可固定的網(wǎng)頁元素為在加載網(wǎng)頁過程中該網(wǎng)頁元素的位置相對于可視區(qū)域固定；所述判斷單元，用于判斷所述位置可固定的網(wǎng)頁元素在網(wǎng)頁中的位置是否發(fā)生變化；所述調(diào)整單元，用于當(dāng)所述位置可固定的網(wǎng)頁元素在網(wǎng)頁中的位置發(fā)生變化后，以所述位置可固定的網(wǎng)頁元素為基準(zhǔn)，調(diào)整所述頁面區(qū)域使目標(biāo)元素展示在可視區(qū)域中。
[0010]本申請實施例采用的上述至少一個技術(shù)方案能夠達(dá)到以下有益效果:
[0011]可以認(rèn)為用戶在滾動網(wǎng)頁結(jié)束時，展示在可視區(qū)域中的頁面區(qū)域包含用戶期望的目標(biāo)元素。以在包含頁面區(qū)域的區(qū)域查找到的位置可固定的網(wǎng)頁元素為基準(zhǔn)，調(diào)整頁面區(qū)域，使目標(biāo)元素展示在可視區(qū)域中，從而解決了現(xiàn)有技術(shù)在加載網(wǎng)頁過程中，因為目標(biāo)元素前面的其它網(wǎng)頁元素下載完成而重新布局導(dǎo)致的該目標(biāo)元素在可視區(qū)域中移動甚至移出可視區(qū)域的問題，也直接提高了目標(biāo)元素的展示效率。此外，可以根據(jù)可視區(qū)域的大小，調(diào)整預(yù)設(shè)的位置可固定的網(wǎng)頁元素的間距，這樣可以更加提高展示目標(biāo)元素的效率。與此同時，也在一定程度上，提升了用戶的體驗。
【附圖說明】
[0012]此處所說明的附圖用來提供對本申請的進(jìn)一步理解，構(gòu)成本申請的一部分，本申請的示意性實施例及其說明用于解釋本申請，并不構(gòu)成對本申請的不當(dāng)限定。在附圖中:
[0013]圖1-1為手機屏幕中的可視區(qū)域的示意圖；
[0014]圖1-2為顯示器屏幕中的可視區(qū)域的示意圖；
[0015]圖1-3為網(wǎng)頁中的可視區(qū)域的示意圖；
[0016]圖1-4為網(wǎng)頁中的可視區(qū)域的示意圖；
[0017]圖1-5為現(xiàn)有技術(shù)可視區(qū)域?qū)W(wǎng)頁元素進(jìn)行展示的示意圖；
[0018]圖1-6為現(xiàn)有技術(shù)重新布局后可視區(qū)域?qū)W(wǎng)頁元素進(jìn)行展示的示意圖；
[0019]圖2-1為本申請實施例1提供的一種展示網(wǎng)頁中目標(biāo)元素的方法的具體實現(xiàn)流程示意圖；
[0020]圖2-2為本申請實施例1提供的網(wǎng)頁加載過程中確定頁面區(qū)域的示意圖；
[0021]圖2-3為本申請實施例1提供的位置可固定的網(wǎng)頁元素在可視區(qū)域進(jìn)行展示的示意圖；
[0022]圖3-1為本申請實施例2提供的一種移動終端展示網(wǎng)頁中目標(biāo)元素的方法的具體實現(xiàn)流程示意圖；
[0023]圖3-2為本申請實施例2提供的移動終端在可視區(qū)域中展示網(wǎng)頁元素的示意圖；
[0024]圖3-3為本申請實施例2提供的移動終端中位置可固定的網(wǎng)頁元素的位置發(fā)生變化的示意圖；
[0025]圖3-4為本申請實施例2提供的移動終端中調(diào)整頁面區(qū)域的示意圖；
[0026]圖4為本申請實施例3提供的一種展示網(wǎng)頁中目標(biāo)元素的裝置的具體結(jié)構(gòu)示意圖。
【具體實施方式】
[0027]為使本申請的目的、技術(shù)方案和優(yōu)點更加清楚，下面將結(jié)合本申請具體實施例及相應(yīng)的附圖對本申請技術(shù)方案進(jìn)行清楚、完整地描述。顯然，所描述的實施例僅是本申請一部分實施例，而不是全部的實施例。基于本申請中的實施例，本領(lǐng)域普通技術(shù)人員在沒有做出創(chuàng)造性勞動前提下所獲得的所有其他實施例，都屬于本申請保護(hù)的范圍。
[0028]在進(jìn)行本申請的技術(shù)方案的詳細(xì)介紹之前，為了明確起見，這里先對幾個術(shù)語作簡要說明。在本申請實施例中將涉及網(wǎng)頁元素的概念。網(wǎng)頁元素，作為構(gòu)成網(wǎng)頁內(nèi)容的因子，可以從不同的角度對其進(jìn)行理解。從網(wǎng)頁元素的類別來看，網(wǎng)頁元素可以包括:文字、圖片、音頻、動畫、視頻等；從網(wǎng)頁元素的層級來看，網(wǎng)頁元素可以體現(xiàn)為單個的網(wǎng)頁因子，比如，一個D0M樹節(jié)點，也可以是多個網(wǎng)頁因子組成的一個集合，比如，網(wǎng)頁上某個區(qū)域可以被視為一個網(wǎng)頁元素，在該區(qū)域中可以存在構(gòu)成多個網(wǎng)頁因子。當(dāng)然，網(wǎng)頁元素還可以從其他方面進(jìn)行理解，無論哪種理解，在本申請中，網(wǎng)頁元素將作為一個基本的操作對象。
[0029]在本申請的實施例中還涉及可視區(qū)域(view port)的概念。一般而言，可視區(qū)域分為兩種，一種體現(xiàn)為如圖1-1、1-2所示的屏幕可視區(qū)域(visual view port);一種體現(xiàn)為如圖1-3和如圖1-4所示的頁面可視區(qū)域(layout view port)，用于顯示全部或部分內(nèi)容的區(qū)域。這種兩種區(qū)域在某些情況下是一致的，比如，一個網(wǎng)頁內(nèi)容剛好充滿布滿屏幕區(qū)域，那么屏幕可視區(qū)域與頁面可視區(qū)域相同。在另一些情況下，屏幕可視區(qū)域可能大于頁面可視區(qū)域，比如，某些頁面可以以“電影模式”呈現(xiàn)，在可視區(qū)域的邊上可能存在一些空白區(qū)域，那么頁面可視區(qū)域僅僅是屏幕可視區(qū)域中除空白區(qū)域之后剩下的部分。本申請中，在不妨礙本申請發(fā)明目的實現(xiàn)的情況下，本領(lǐng)域技術(shù)人員可以根據(jù)實際情況將可視區(qū)域理解為屏幕可視區(qū)域或頁面可視區(qū)域。
[0030]以下結(jié)合附圖，詳細(xì)說明本申請各實施例提供的技術(shù)方案。
[0031]實施例1
[0032]如前所述，瀏覽器在加載網(wǎng)頁內(nèi)容的過程中，由于傳輸速率、網(wǎng)頁元素數(shù)據(jù)大小、瀏覽器所在設(shè)備的運算處理能力等不同原因，在可視區(qū)域中展示的網(wǎng)頁元素順序可能不同于一般的閱讀習(xí)慣。比如，如圖1-5所示