網(wǎng)頁(yè)圖片加載方法和裝置的制造方法
【技術(shù)領(lǐng)域】
[0001]本發(fā)明涉及互聯(lián)網(wǎng)領(lǐng)域，特別涉及網(wǎng)頁(yè)圖片加載方法和裝置。
【背景技術(shù)】
[0002]目前，很多網(wǎng)頁(yè)上都添加了各種圖片，以便更加直觀地向用戶傳遞各種信息。而眾所周知，圖片文件往往較大。下載較多的圖片會(huì)占用較多的流量，特別是在按流量計(jì)費(fèi)的情形下，往往可能會(huì)耗費(fèi)更多的費(fèi)用。特別是在使用智能手機(jī)等移動(dòng)終端，通過(guò)移動(dòng)通信網(wǎng)絡(luò)訪問(wèn)網(wǎng)頁(yè)時(shí),客戶對(duì)流量更加敏感。
[0003]通常，在網(wǎng)頁(yè)瀏覽器加載并顯示網(wǎng)頁(yè)時(shí)，一般的流程如下:
[0004]首先，在瀏覽器地址欄中輸入地址后開(kāi)始加載網(wǎng)頁(yè)。
[0005]瀏覽器從網(wǎng)絡(luò)接收到頁(yè)面的超文本標(biāo)記語(yǔ)言(HTML)數(shù)據(jù)，然后開(kāi)始解析，并生成文件對(duì)象模型(DOM)樹(shù)，然后根據(jù)DOM樹(shù)對(duì)網(wǎng)頁(yè)進(jìn)行排版，渲染顯示。
[0006]在解析的過(guò)程中，每當(dāng)發(fā)現(xiàn)有圖片標(biāo)簽(img標(biāo)簽)，就發(fā)起網(wǎng)絡(luò)請(qǐng)求來(lái)加載圖片資源，以便后續(xù)在用戶滾動(dòng)網(wǎng)頁(yè)到該圖片所在位置時(shí)能顯示該圖片。
[0007]在上述一般流程中，無(wú)論圖片位于網(wǎng)頁(yè)的什么位置，都會(huì)被加載。但是如果圖片位于一個(gè)很長(zhǎng)頁(yè)面的靠后的位置，用戶并沒(méi)有進(jìn)行向下滾動(dòng)的操作位于靠后的位置的圖片照樣被加載。
[0008]這樣就存在一個(gè)問(wèn)題:當(dāng)用戶沒(méi)有向下滾動(dòng)頁(yè)面以瀏覽下面的網(wǎng)頁(yè)內(nèi)容的時(shí)候，已經(jīng)加載不需要被顯示的圖片，導(dǎo)致流量的浪費(fèi)。
[0009]另外，目前還有一種加載并顯示網(wǎng)頁(yè)的方式，其中，在使用移動(dòng)通信網(wǎng)絡(luò)訪問(wèn)網(wǎng)頁(yè)時(shí)，一律不加載圖片，直到用戶通過(guò)點(diǎn)擊等方式選擇查看圖片時(shí)，才開(kāi)始下載該圖片。
[0010]這樣，可以節(jié)省加載不必要的圖片所耗費(fèi)的流量，但是當(dāng)用戶想要查看圖片時(shí)，需要額外的操作和額外的等待時(shí)間，用戶體驗(yàn)較差。
[0011]如上所述，在流暢地瀏覽含有圖片的網(wǎng)頁(yè)與節(jié)省下載不必要的圖片將耗費(fèi)的流量之間存在矛盾。
[0012]需要一種網(wǎng)頁(yè)圖片加載方法和裝置，使得能夠在流暢地瀏覽含有圖片的網(wǎng)頁(yè)與節(jié)省流量之間取得某種平衡。

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

[0013]本發(fā)明所要解決的一個(gè)技術(shù)問(wèn)題是提供一種網(wǎng)頁(yè)圖片加載方法和裝置，使得既能夠流暢地瀏覽含有圖片的網(wǎng)頁(yè)，又能夠節(jié)省下載部分不必要的圖片將耗費(fèi)的流量。
[0014]根據(jù)本發(fā)明的一個(gè)方面，提供了一種網(wǎng)頁(yè)圖片加載方法，包括:響應(yīng)于網(wǎng)頁(yè)首次排版完成或響應(yīng)于屏幕顯示范圍移動(dòng)指令，確定圖片加載范圍內(nèi)的待加載圖片，圖片加載范圍包括當(dāng)前屏幕顯示范圍或當(dāng)前屏幕顯示范圍以外預(yù)定距離內(nèi)的預(yù)定距離范圍；以及加載圖片加載范圍內(nèi)的待加載圖片。
[0015]優(yōu)選地，該網(wǎng)頁(yè)圖片加載方法還可以包括:解析所獲取的網(wǎng)頁(yè)源文件以生成網(wǎng)頁(yè)的DOM(文件對(duì)象模型)樹(shù)；當(dāng)在解析過(guò)程中發(fā)現(xiàn)有圖片標(biāo)簽時(shí)，在記錄表中記錄與圖片標(biāo)簽對(duì)應(yīng)的DOM節(jié)點(diǎn)；以及根據(jù)圖片標(biāo)簽的CSS (層疊樣式表)屬性進(jìn)行圖片排版。
[0016]優(yōu)選地,確定圖片加載范圍內(nèi)的待加載圖片的步驟可以包括:查詢(xún)記錄表中記錄的每個(gè)DOM節(jié)點(diǎn)的排版結(jié)果；根據(jù)排版結(jié)果，判斷與DOM節(jié)點(diǎn)對(duì)應(yīng)的圖片標(biāo)簽所對(duì)應(yīng)的圖片的位置是否在圖片加載范圍內(nèi)；如果在圖片加載范圍內(nèi)，則確定圖片為圖片加載范圍內(nèi)的待加載圖片。
[0017]優(yōu)選地，確定圖片加載范圍內(nèi)的待加載圖片的步驟還可以包括:在記錄表中刪除對(duì)圖片加載范圍內(nèi)的待加載圖片所對(duì)應(yīng)的DOM節(jié)點(diǎn)的記錄。
[0018]優(yōu)選地，預(yù)定距離可以是基于一次屏幕顯示范圍移動(dòng)指令將使屏幕顯示范圍移動(dòng)的距離。
[0019]根據(jù)本發(fā)明的另一個(gè)方面，提供了一種網(wǎng)頁(yè)圖片加載裝置，包括:圖片確定裝置，用于響應(yīng)于網(wǎng)頁(yè)首次排版完成或響應(yīng)于屏幕顯示范圍移動(dòng)指令，確定圖片加載范圍內(nèi)的待加載圖片，圖片加載范圍包括當(dāng)前屏幕顯示范圍或當(dāng)前屏幕顯示范圍以外預(yù)定距離內(nèi)的預(yù)定距離范圍；以及圖片加載裝置，用于加載圖片加載范圍內(nèi)的待加載圖片。
[0020]優(yōu)選地，該網(wǎng)頁(yè)圖片加載裝置還可以包括:解析裝置，用于解析所獲取的網(wǎng)頁(yè)源文件以生成網(wǎng)頁(yè)的DOM樹(shù)；記錄裝置，用于當(dāng)在解析過(guò)程中發(fā)現(xiàn)有圖片標(biāo)簽時(shí)，在記錄表中記錄與圖片標(biāo)簽對(duì)應(yīng)的DOM節(jié)點(diǎn)；以及排版裝置，用于根據(jù)圖片標(biāo)簽的CSS屬性進(jìn)行圖片排版。
[0021]優(yōu)選地，圖片確定裝置可以包括:查詢(xún)裝置，用于查詢(xún)記錄表中記錄的每個(gè)DOM節(jié)點(diǎn)的排版結(jié)果；判斷裝置，用于根據(jù)排版結(jié)果，判斷與DOM節(jié)點(diǎn)對(duì)應(yīng)的圖片標(biāo)簽所對(duì)應(yīng)的圖片的位置是否在圖片加載范圍內(nèi)；確定裝置，用于在判斷裝置判定位置在圖片加載范圍內(nèi)的情況下，確定圖片為圖片加載范圍內(nèi)的待加載圖片。
[0022]優(yōu)選地，圖片確定裝置還可以包括:刪除裝置，用于在記錄表中刪除對(duì)圖片加載范圍內(nèi)的待加載圖片所對(duì)應(yīng)的DOM節(jié)點(diǎn)的記錄。
[0023]優(yōu)選地，預(yù)定距離可以是基于一次屏幕顯示范圍移動(dòng)指令將使屏幕顯示范圍移動(dòng)的距離。
[0024]通過(guò)使用本發(fā)明的網(wǎng)頁(yè)圖片加載方法和裝置，在初始加載網(wǎng)頁(yè)時(shí)沒(méi)有加載全部圖片以節(jié)省流量的情況下，在瀏覽過(guò)程中適應(yīng)性地自動(dòng)加載了部分圖片，以備用戶瀏覽，實(shí)現(xiàn)了在流暢地瀏覽含有圖片的網(wǎng)頁(yè)與節(jié)省流量之間的良好平衡。
【附圖說(shuō)明】
[0025]圖1是根據(jù)本發(fā)明的網(wǎng)頁(yè)圖片加載方法的示意性流程圖。
[0026]圖2是在根據(jù)本發(fā)明的網(wǎng)頁(yè)圖片加載方法中可以采用的對(duì)網(wǎng)頁(yè)源文件進(jìn)行解析和排版的流程圖。
[0027]圖3是可以用來(lái)確定圖片加載范圍內(nèi)的待加載圖片的一種方式的流程圖。
[0028]圖4是根據(jù)本發(fā)明一個(gè)實(shí)施例的網(wǎng)頁(yè)圖片加載裝置的示意性方框圖。
[0029]圖5是根據(jù)本發(fā)明另一個(gè)實(shí)施例的網(wǎng)頁(yè)圖片加載裝置的示意性方框圖。
[0030]圖6是圖片確定裝置的示意性方框圖。
【具體實(shí)施方式】
[0031]下面參考附圖1-6來(lái)詳細(xì)描述根據(jù)本發(fā)明的網(wǎng)頁(yè)圖片加載方法和裝置。
[0032]為避免掩蔽本發(fā)明的主要技術(shù)構(gòu)思，這里沒(méi)有描述一些細(xì)節(jié)，也沒(méi)有描述一些網(wǎng)頁(yè)圖片加載方法和裝置以及一般的網(wǎng)頁(yè)加載方法和裝置中常用的常規(guī)步驟和裝置。
[0033]圖1的示意性流程圖示出了本發(fā)明的網(wǎng)頁(yè)圖片加載方法。
[0034]用戶在瀏覽器地址欄中輸入地址，或者通過(guò)在別的頁(yè)面點(diǎn)擊超鏈接，開(kāi)始請(qǐng)求訪問(wèn)網(wǎng)頁(yè)。特別是在使用手機(jī)等移動(dòng)通信終端訪問(wèn)網(wǎng)頁(yè)時(shí)，很多網(wǎng)頁(yè)的內(nèi)容往往多于屏幕一次能夠顯示的內(nèi)容。
[0035]在加載網(wǎng)頁(yè)源文件(例如html)文件時(shí)，網(wǎng)頁(yè)中至少部分圖片并沒(méi)有立即加載，以便避免下載不必要的圖片，節(jié)省流量。
[0036]這里，有可能完全沒(méi)有下載任何圖片，也有可能只下載了網(wǎng)頁(yè)的首屏的圖片即第一屏要顯示的圖片，或者也有可能只下載了字節(jié)數(shù)小于預(yù)定數(shù)值的圖片。
[0037]文字的字節(jié)數(shù)較少，因此，可以下載全部的文字內(nèi)容?；蛘?，也可以根據(jù)需要或設(shè)置而下載預(yù)定部分的文字內(nèi)容。
[0038]在步驟S200，響應(yīng)于網(wǎng)頁(yè)首次排版完成，或者響應(yīng)于屏幕顯示范圍移動(dòng)指令，確定圖片加載范圍內(nèi)的待加載圖片。圖片加載范圍包括當(dāng)前屏幕顯示范圍或當(dāng)前屏幕顯示范圍以外預(yù)定距離內(nèi)的預(yù)定距離范圍。
[0039]然后，在步驟S300,加載圖片加載t[!圍內(nèi)的待加載圖片。
[0040]下面對(duì)上述步驟進(jìn)行說(shuō)明。
[0041]當(dāng)下載了網(wǎng)頁(yè)源文件之后，網(wǎng)頁(yè)瀏覽器，特別是智能手機(jī)的網(wǎng)頁(yè)瀏覽器會(huì)對(duì)網(wǎng)頁(yè)內(nèi)容重新排版，以適應(yīng)例如智能手機(jī)的屏幕。
[0042]一方面，當(dāng)網(wǎng)頁(yè)首次排版完成時(shí)，屏幕上將顯示第一屏的內(nèi)容。如果在第一屏的內(nèi)容中有待加載的圖片，則可以認(rèn)