為需要加載該圖片以供用戶瀏覽。這些圖片一般都會被用戶瀏覽，能夠發(fā)揮圖片的意義。此時不需要等待用戶的指令，就開始加載圖片，以便在屏幕上顯示。
[0043]或者，如果在第一屏之后預(yù)定距離的范圍內(nèi)有待加載的圖片，則可以認為用戶接下來很有可能要瀏覽這些圖片，所以可以提前加載這些圖片以便在用戶發(fā)出屏幕顯示范圍移動指令時可以直接顯示這些圖片。此時，圖片尚不需要在屏幕上顯示。但是用戶接下來繼續(xù)瀏覽這些圖片的可能性較大。提前加載這些圖片可以減少用戶的等待時間，改善用戶的上網(wǎng)體驗。
[0044]另一方面，當用戶通過按壓進度條的下拉按鈕、點擊進度條、點擊翻頁指令或者通過滑屏操作等方式發(fā)出屏幕顯示范圍移動指令時，屏幕上將顯示新的內(nèi)容，如果這些新顯示的內(nèi)容中有尚未加載的圖片，則需要加載該圖片。另外，如果新顯示的內(nèi)容之后預(yù)定距離的預(yù)定距離范圍內(nèi)有待加載的圖片，也可以提前加載這些圖片，以便在用戶下一次發(fā)出屏幕顯示范圍移動指令時可以直接顯示這些圖片。
[0045]在本發(fā)明的上下文中，屏幕顯示范圍是指屏幕一次顯示的網(wǎng)頁內(nèi)容的范圍。屏幕顯示范圍移動指令則是使得屏幕上顯示的網(wǎng)頁內(nèi)容的范圍上下左右移動的指令，例如翻頁指令、下拉指令、滑屏指令等。當前屏幕顯示范圍則是當前在屏幕上顯示的網(wǎng)頁內(nèi)容的范圍。
[0046]在本發(fā)明中，定義了圖片加載范圍。這是網(wǎng)頁內(nèi)容中的一個范圍。在該范圍中的待加載圖片(或者說，未加載圖片)可以被認為是需要加載的圖片。在本發(fā)明中，圖片加載范圍可以是當前屏幕顯示范圍，也可以是當前屏幕顯示范圍以外預(yù)定距離內(nèi)的預(yù)定距離范圍，也可以既包括當前屏幕顯示范圍，又包括當前屏幕顯示范圍以外預(yù)定距離內(nèi)的預(yù)定距離范圍。
[0047]這個預(yù)定距離可以基于圖片的頂端、中間、末端或其它位置計算。不論以何為基準計算，意義都可以是一樣的，只是對于同樣的范圍所設(shè)定的數(shù)值會有所不同而已。
[0048]另一方面，這個預(yù)定距離可以相對于當前屏幕顯示范圍的邊緣(例如上邊緣(向上移動時)、下邊緣(向下移動時)、左邊緣(向左移動時)、右邊緣(向右移動時))計算。
[0049]這個預(yù)定距離可以根據(jù)需要，例如瀏覽習(xí)慣、用戶對流量的敏感程度等，提前設(shè)置。還可以為用戶提供設(shè)置工具，以便于設(shè)置該預(yù)定距離。
[0050]作為示例，預(yù)定距離可以對應(yīng)于屏幕一次能夠顯示的網(wǎng)頁內(nèi)容范圍，或者說，對應(yīng)于一屏(一個屏幕顯示范圍)內(nèi)容。即，提前加載下一屏的網(wǎng)頁內(nèi)容中的圖片。
[0051]當然，預(yù)定距離也可以設(shè)置為對應(yīng)于兩屏或三屏或更多，即提前下載下兩屏、下三屏甚至更多的網(wǎng)頁內(nèi)容中的圖片。
[0052]作為另一個示例，預(yù)定距離還可以對應(yīng)于基于一次屏幕顯示范圍移動指令將在屏幕上新增加的網(wǎng)頁內(nèi)容范圍。例如，通過按壓進度條下的下拉按鈕、點擊進度條或者通過滑屏操作等方式發(fā)出屏幕顯示范圍移動指令時，屏幕上原來顯示的網(wǎng)頁內(nèi)容向上移動，使得將新增進入屏幕顯示的那部分網(wǎng)頁內(nèi)容范圍。即，提前加載通過一次屏幕顯示范圍移動指令將新增進入屏幕顯示的網(wǎng)頁內(nèi)容中的圖片。
[0053]同樣地，預(yù)定距離也可以設(shè)置為對應(yīng)于基于多次屏幕顯示范圍移動指令將在屏幕上新增加的網(wǎng)頁內(nèi)容范圍。
[0054]在例如使用智能手機等訪問網(wǎng)頁時往往需要對網(wǎng)頁內(nèi)容進行排版，當前屏幕顯示范圍和預(yù)定距離范圍可以基于排版結(jié)果來確定。而圖片的位置則可以在解析過程中得知的。
[0055]圖2示出了在根據(jù)本發(fā)明的網(wǎng)頁圖片加載方法中可以采用的對網(wǎng)頁源文件進行解析和排版的流程圖。
[0056]解析和排版的操作可以在圖1中確定圖片加載范圍內(nèi)的待加載圖片的步驟S200之前執(zhí)行。更具體地，這些操作可以是在加載網(wǎng)頁源文件之后或在加載網(wǎng)頁源文件的過程中執(zhí)行的。
[0057]在步驟S110，解析所獲取網(wǎng)頁源文件以生成DOM樹。這一步驟可以按與現(xiàn)有技術(shù)中相同的方式來執(zhí)行。
[0058]在步驟S120，判斷DOM樹中是否有圖片標簽。
[0059]如果在步驟S120中判定沒有圖片標簽，則在步驟S150繼續(xù)進行常規(guī)的加載顯示流程。
[0060]如果在步驟S120中判定有圖片標簽，則在步驟S130中，在記錄表中記錄與該圖片標簽對應(yīng)的DOM節(jié)點。并且在步驟S140中，在對網(wǎng)頁排版的過程中，根據(jù)該圖片標簽的層疊樣式表(CSS)屬性對該圖片進行排版。
[0061]在上面的描述和圖2中，步驟S130在前，步驟S140在后。然而，本領(lǐng)域技術(shù)人員應(yīng)該明白，這兩個步驟的順序完全可以顛倒過來，即步驟S130在前，而步驟S140在后?；蛘?，這兩個步驟也可以同時執(zhí)行。
[0062]在圖2所示的操作結(jié)束之后，已下載了網(wǎng)頁中的文字內(nèi)容(或者至少部分文字內(nèi)容)，記錄了有圖片的DOM節(jié)點，并且根據(jù)圖片標簽的CSS屬性進行了圖片排版。之后，可以渲染顯示已經(jīng)下載的網(wǎng)頁的文字內(nèi)容和已經(jīng)下載的當前屏幕顯示范圍內(nèi)的圖片(如果已經(jīng)下載了部分圖片的話)了。
[0063]另一方面，也做好了對待加載圖片的加載準備工作。換句話說，為步驟200中確定圖片加載范圍內(nèi)的待加載圖片提供了依據(jù)。
[0064]下面參考圖3來詳細描述本發(fā)明可以用來確定圖片加載范圍內(nèi)的待加載圖片的一種方式的示例性流程。
[0065]首先，在步驟S210，查詢記錄表中DOM節(jié)點的排版結(jié)果。
[0066]在步驟S220，根據(jù)排版結(jié)果，判斷與該DOM節(jié)點對應(yīng)的圖片標簽所對應(yīng)的圖片(也可以稱為“該DOM節(jié)點對應(yīng)的圖片”)的位置是否在圖片加載范圍內(nèi)。
[0067]如果在步驟S220中判定位置不在圖片加載范圍內(nèi)，則在步驟S230中選擇記錄表中下一個DOM節(jié)點，然后返回步驟S210重新查詢排版結(jié)果。
[0068]如果在步驟S220中判定位置在圖片加載范圍內(nèi)，則在步驟S240確定該DOM節(jié)點對應(yīng)的圖片是圖片加載范圍內(nèi)的待加載圖片。
[0069]另外,可以在步驟S250,在記錄表中刪除對該DOM節(jié)點的記錄，以避免重復(fù)加載。
[0070]圖3中示出在步驟S240之后執(zhí)行步驟S250。然而，本領(lǐng)域技術(shù)人員應(yīng)該明白，步驟S250與步驟S240之間可以沒有先后關(guān)系。步驟S250可以在步驟S240之后、之前或同時執(zhí)行。
[0071]然后，在步驟S260中，查看記錄表中是否還有尚未經(jīng)步驟S220判斷過的DOM節(jié)點。
[0072]如果有，則進入步驟S230，選擇記錄表中下一個DOM節(jié)點，，然后返回步驟S220重新進行判斷。由此，對記錄表中每一個DOM節(jié)點進行上述判斷和相應(yīng)處理。
[0073]如果沒有，即已經(jīng)對記錄表中所有DOM節(jié)點進行判斷，則本次圖片加載過程結(jié)束。
[0074]圖3的流程可以在圖2所示步驟S140的首次排版完成后，即剛開始訪問網(wǎng)頁時執(zhí)行，以便基于在屏幕上初始顯示的網(wǎng)頁內(nèi)容范圍選擇性地加載圖片。
[0075]另外，圖3的流程也可以響應(yīng)于用戶的屏幕顯示范圍移動指令(例如翻頁或下拉指令)而執(zhí)行，以便隨時更新以加載可能需要的圖片。
[0076]圖3的流程圖給出了一種確定圖片加載范圍內(nèi)的待加載圖片的方式。然而本領(lǐng)域技術(shù)人員應(yīng)當明白，完全有可能有其它方式來實現(xiàn)這一目的。
[0077]例如，可以在解析排版完成之后，或者在用戶發(fā)出屏幕顯示范圍移動指令之后，遍歷DOM樹上的所有節(jié)點以判斷是否有圖片標簽，是否在圖片加載范圍之內(nèi)，即不需要如步驟S130所述在記錄表中記錄有圖片標簽的DOM節(jié)點。
[0078]另外，也可以基于圖片加載范圍，對圖片加載范圍內(nèi)的DOM節(jié)點判斷是否有圖片