專利名稱：圖片呈現(xiàn)方法及設備的制作方法
技術(shù)領(lǐng)域：
本發(fā)明涉及計算機技術(shù)領(lǐng)域，具體涉及一種頁面中的圖片呈現(xiàn)方法及設備。
背景技術(shù)：
隨著互聯(lián)網(wǎng)的快速發(fā)展，網(wǎng)站頁面使用越來越多的多媒體資源來豐富頁面的顯示效果，以吸引用戶瀏覽。然而，在加載頁面的過程中，會下載頁面中所有的圖片，即使不在頁面可見區(qū)域以內(nèi)的圖片也會下載。由于在用戶處的網(wǎng)絡資源有限，會因為需要下載頁面中所有的圖片而降低頁面的加載速度，從而影響用戶體驗。

發(fā)明內(nèi)容
鑒于上述問題，提出了本發(fā)明以便提供一種克服上述問題或者至少部分地解決上述問題的頁面中的圖片呈現(xiàn)方法及設備。根據(jù)本發(fā)明的一個方面，提供了一種頁面中的圖片呈現(xiàn)方法，包括步驟:將頁面劃分為多個區(qū)塊并注冊；對各區(qū)塊中需要延時呈現(xiàn)的圖片進行注冊；在瀏覽器中下載頁面中未注冊的圖片；判斷注冊的區(qū)塊是否要呈現(xiàn)，如果要呈現(xiàn)，則在瀏覽器中下載注冊的區(qū)塊中需要延時呈現(xiàn)的注冊的圖片；以及呈現(xiàn)所下載的位于瀏覽器的當前窗口中的圖片。可選地，對各區(qū)塊中需要延時呈現(xiàn)的圖片進行注冊的步驟包括:將需要延時呈現(xiàn)的圖片的地址信息嵌入到圖片標簽的自定義標簽屬性中?？蛇x地，判斷注冊的區(qū)塊是否要呈現(xiàn)的步驟包括:判斷注冊的區(qū)塊是否位于瀏覽器的當前窗口中?？蛇x地，判斷注冊的區(qū)塊是否需要呈現(xiàn)的步驟包括:判斷注冊的區(qū)塊是否在瀏覽器的窗口中移動?？蛇x地，還包括步驟:當瀏覽器的當前窗口中呈現(xiàn)的內(nèi)容發(fā)生變化時，判斷注冊的區(qū)塊是否要呈現(xiàn)，如果要呈現(xiàn)，則下載注冊的區(qū)塊中需要延時呈現(xiàn)的注冊的圖片?？蛇x地，下載注冊的區(qū)塊中需要延時呈現(xiàn)的注冊圖片包括步驟:將圖片的地址信息從圖片標簽的自定義標簽屬性復制到圖片標簽的源地址屬性中，以便瀏覽器可以根據(jù)圖片標簽的內(nèi)容去下載所述圖片。根據(jù)本發(fā)明的另一個方面，提供了一種頁面中的圖片呈現(xiàn)設備，包括:區(qū)塊劃分器，被配置為將頁面劃分為多個區(qū)塊；區(qū)塊注冊器，被配置為對各區(qū)塊進行注冊，并對各區(qū)塊中需要延時呈現(xiàn)的圖片進行注冊；圖片渲染器，被配置為在瀏覽器中下載頁面中未注冊的圖片；區(qū)塊呈現(xiàn)判定器，被配置為判斷注冊的區(qū)塊是否要呈現(xiàn)，如果要呈現(xiàn)，則由圖片渲染器在瀏覽器中下載注冊的區(qū)塊中需要延時呈現(xiàn)的注冊的圖片；以及圖片呈現(xiàn)器，被配置為呈現(xiàn)由圖片渲染器所下載的、位于瀏覽器的當前窗口中的圖片?？蛇x地，區(qū)塊注冊器將需要延時呈現(xiàn)的圖片的地址信息嵌入到圖片標簽的自定義標簽屬性中。
可選地，區(qū)塊呈現(xiàn)判定器通過判斷所注冊的區(qū)塊是否位于瀏覽器的當前窗口中來判斷所注冊的區(qū)塊是否要呈現(xiàn)。可選地，區(qū)塊呈現(xiàn)判定器通過判斷所述注冊的區(qū)塊是否在瀏覽器的窗口中移動來判斷是否要呈現(xiàn)所述注冊的區(qū)塊?？蛇x地，當瀏覽器的當前窗口上呈現(xiàn)的內(nèi)容發(fā)生變化時，區(qū)塊呈現(xiàn)判定器判斷注冊的區(qū)塊是否要呈現(xiàn)，如果要呈現(xiàn)，則由圖片渲染器來下載注冊的區(qū)塊中需要延時呈現(xiàn)的注冊的圖片。可選地，圖片渲染器將圖片的地址信息從圖片標簽的自定義標簽屬性復制到圖片標簽的源地址屬性中，以便瀏覽器可以根據(jù)圖片標簽的內(nèi)容去下載圖片。根據(jù)本發(fā)明的在頁面中的圖片呈現(xiàn)方法和頁面中的圖片呈現(xiàn)設備，通過將頁面劃分為多個區(qū)塊，區(qū)塊中可以放置注冊過的、需要延時呈現(xiàn)的圖片，當區(qū)塊位于頁面的可見區(qū)域之內(nèi)時，才會對該區(qū)塊中注冊過的、需要延時呈現(xiàn)的圖片進行下載。如果該區(qū)塊一直處于頁面的不可見區(qū)域時，該區(qū)塊內(nèi)的圖片將不會被下載，此時瀏覽器會把網(wǎng)絡資源分配給下載需要呈現(xiàn)的圖片，從而能夠合理運用網(wǎng)絡資源，提高頁面的加載速度。上述說明僅是本發(fā)明技術(shù)方案的概述，為了能夠更清楚了解本發(fā)明的技術(shù)手段，而可依照說明書的內(nèi)容予以實施，并且為了讓本發(fā)明的上述和其它目的、特征和優(yōu)點能夠更明顯易懂，以下特舉本發(fā)明的具體實施方式
。


通過閱讀下文優(yōu)選實施方式的詳細描述，各種其他的優(yōu)點和益處對于本領(lǐng)域普通技術(shù)人員將變得清楚明了。附圖僅用于示出優(yōu)選實施方式的目的，而并不認為是對本發(fā)明的限制。而且在整個附圖中，用相同的參考符號表示相同的部件。在附圖中:圖1示出了根據(jù)本發(fā)明一個實施例的頁面中的圖片呈現(xiàn)方法100的流程圖；圖2示出了根據(jù)本發(fā)明一個實施例的用于瀏覽器的實例性的頁面200 ;以及圖3示出了根據(jù)本發(fā)明一個實施例的頁面中的圖片呈現(xiàn)設備300的結(jié)構(gòu)框圖。
具體實施例方式下面將參照附圖更詳細地描述本公開的示例性實施例。雖然附圖中顯示了本公開的示例性實施例，然而應當理解，可以以各種形式實現(xiàn)本公開而不應被這里闡述的實施例所限制。相反，提供這些實施例是為了能夠更透徹地理解本公開，并且能夠?qū)⒈竟_的范圍完整的傳達給本領(lǐng)域的技術(shù)人員。Web頁面運行在各種各樣的瀏覽器當中，瀏覽器下載、解析和渲染W(wǎng)eb頁面內(nèi)容的速度直接影響著用戶體驗。為此，本發(fā)明提出一種頁面中的圖片呈現(xiàn)方法和一種頁面中的圖片呈現(xiàn)設備。為了方便說明，在下面的描述中，設瀏覽器窗口的平面為XY平面。本發(fā)明提出的在頁面中的圖片呈現(xiàn)方法是，將頁面劃分為多個區(qū)塊，區(qū)塊中可以放置注冊過的、需要延時呈現(xiàn)的圖片，當區(qū)塊位于頁面的可見區(qū)域之內(nèi)時，才會對該區(qū)塊中注冊過的、需要延時呈現(xiàn)的圖片進行下載。如果該區(qū)塊一直處于頁面的不可見區(qū)域時，該區(qū)塊內(nèi)的圖片將不會被下載，此時瀏覽器會把網(wǎng)絡資源分配用于下載需要呈現(xiàn)的圖片，從而能夠合理運用網(wǎng)絡資源，有效提高頁面的加載速度。這里的“可見區(qū)域”是指網(wǎng)頁的可視范圍，具體是指整個HTML頁面文檔能夠呈現(xiàn)在瀏覽器窗口的部分。通常一個HTML文檔的整體高度都高于瀏覽器窗口的高度，所以會有一部分的頁面處于隱藏的狀態(tài)，用戶可以通過移動瀏覽器的滾動條來查看頁面的這些隱藏的區(qū)域，在整個過程中，能夠看到的部分被稱為頁面的可見區(qū)域。下面結(jié)合圖1具體說明根據(jù)本發(fā)明一個實施例的、適于解決上述問題的頁面中的圖片呈現(xiàn)方法100的流程圖。如圖1所示，根據(jù)本發(fā)明一實施例的頁面中的圖片呈現(xiàn)方法100始于步驟S110，在步驟SllO中，將頁面劃分為多個區(qū)塊并注冊。其中，每個區(qū)塊中可以放置一個或多個圖片，該圖片可以是靜態(tài)圖片或動態(tài)圖片。通過對區(qū)塊中的圖片進行管理，可實現(xiàn)各圖片不同的呈現(xiàn)方式，例如有的圖片無需注冊即可直接呈現(xiàn)，而有的圖片需注冊，然后再根據(jù)條件確定何時呈現(xiàn)。可選地，可在瀏覽器窗口的高度方向(即瀏覽器窗口的Y軸方向)上將頁面劃分為多個區(qū)塊(block)，部分實現(xiàn)代碼如下:var mutex=$ (body).getClientHeight () ; // 瀏覽器窗口 的高度；var blocks=new Array ($ (body).scrollHeight O/mutex) ;//劃分為多個區(qū)塊并
注冊；圖2示出了根據(jù)本發(fā)明一個實施例的用于瀏覽器的實例性的頁面200。如圖2所示，一個HTML文檔所形成的頁面200根據(jù)瀏覽器窗口 210的高度在瀏覽器的Y軸方向上被劃分成多個區(qū)塊，為了圖示清晰起見，圖2中只示出了兩個區(qū)塊201和202，實際上可以包括若干個區(qū)塊。在呈現(xiàn)頁面期間，可以記錄劃分出的多個區(qū)塊，例如，可以在頁面加載期間，利用在頁面加載時運行的JS腳本來注冊所劃分的區(qū)塊。在區(qū)塊201中，包含三個圖片2011、2012、和2013，其中圖片2011為需要延時呈現(xiàn)的圖片，而圖片2012和2013為即時呈現(xiàn)的圖片。在區(qū)塊202中，包含三個圖片2021、2022、和2023，其中圖片2022和2023為需要延時呈現(xiàn)的圖片，而圖片2021為即時呈現(xiàn)的圖片。這里，需要延時呈現(xiàn)的圖片只有在需要顯示時，例如當其所在的區(qū)塊位于瀏覽器的當前窗口中時或者瀏覽器的滾動條滾動時其所在的區(qū)塊會處于瀏覽器的當前窗口時才會呈現(xiàn)。在圖2中只示出了在Y軸方向有滾動條的例子，可選地，當頁面在X軸方向上的寬度大于瀏覽器窗口的寬度(即瀏覽器窗口在X軸方向上的大小)時，在X軸方向上也可以劃分出多個區(qū)塊，劃分方式如上面所述的在Y軸方向上的劃分方式。隨后，在步驟S120中，對頁面中每個區(qū)塊中的需要延時呈現(xiàn)的圖片進行注冊。也就是，如果該區(qū)塊中有需要延時呈現(xiàn)的圖片時，將該需要延時呈現(xiàn)的圖片進行注冊?？蛇x地，注冊需要延時呈現(xiàn)的圖片是指將需要延時呈現(xiàn)的圖片的地址信息嵌入到圖片標簽的自定義標簽屬性中，部分實現(xiàn)代碼如下:<img data-lazyload="圖片的地址"width="90"height="64"alt=""/>在本發(fā)明的實施例中，需要延時呈現(xiàn)的圖片的圖片標簽(例如img標簽)中沒有圖片的地址信息，例如沒有“src=〃圖片的地址〃”部分或者src中沒有賦值，而是將需要延時呈現(xiàn)的圖片的地址信息嵌入到圖片標簽的自定義標簽屬性中，例如該自定義標簽屬性可以是延遲加載屬性(data-lazyload)。因此當頁面在解析需要延時呈現(xiàn)的圖片的圖片標簽時，由于需要延時呈現(xiàn)的圖片的圖片標簽中沒有關(guān)鍵的圖片的地址信息，使得在該頁面中不會立即呈現(xiàn)圖片，而是會根據(jù)圖片標簽的自定義標簽屬性延遲呈現(xiàn)該圖片。隨后，在步驟S130中，在瀏覽器中下載該頁面中未注冊的圖片。其中，下載該頁面中未注冊的圖片的過程可以是頁面先解析未注冊的圖片的圖片標簽，由于圖片標簽中有圖片的地址信息時，瀏覽器可立即下載該圖片。例如，在圖2所示的頁面200中，未注冊的圖片2012、2013以及2021在顯示頁面200時就可以直接被下載，也就是說，未注冊的圖片所在的區(qū)塊即使未處于瀏覽器的當前窗口中，該圖片也已被下載，并隨時處于被呈現(xiàn)的狀態(tài)。隨后，在步驟S140中，判斷是否要呈現(xiàn)所注冊的區(qū)塊。可選地，可通過以下兩種方式判斷所注冊的區(qū)塊是否要呈現(xiàn):方式一、判斷該區(qū)塊是否位于瀏覽器的當前窗口中。方式二、判斷該區(qū)塊是否通過移動而位于瀏覽器的窗口中，例如區(qū)塊在瀏覽器的Y軸方向上移動，或者區(qū)塊在瀏覽器的X軸方向上移動。其中，位于瀏覽器的當前窗口中的區(qū)塊是指頁面中在瀏覽器當前窗口中顯示的區(qū)塊。通常一個由HTML文檔形成的頁面的整體高度高于瀏覽器窗口的高度，所以一部分的頁面會處于隱藏的狀態(tài)，這可以通過移動瀏覽器的滾動條來達到查看處于隱藏狀態(tài)的部分頁面。再參見圖2，頁面200的區(qū)塊201位于瀏覽器的當前窗口 210中，而區(qū)塊202未處于瀏覽器的當前窗口 210中，所以，區(qū)塊201被判斷為要呈現(xiàn)，而區(qū)塊202被判斷為不呈現(xiàn)?？蛇x地，如果區(qū)塊202通過瀏覽器的滾動條可以呈現(xiàn)，那么區(qū)塊202也被判斷為要呈現(xiàn)。當在步驟S140中判斷某個區(qū)塊要呈現(xiàn)時，則進入步驟S150。在步驟S150中，在瀏覽器中解析、渲染并下載該區(qū)塊中需要延時呈現(xiàn)的注冊的圖片?？蛇x地，將圖片的地址信息從圖片標簽的自定義標簽屬性復制到圖片標簽的源地址屬性中，以便瀏覽器可以根據(jù)圖片標簽的內(nèi)容去下載該圖片。下面結(jié)合圖1和圖2具體描述步驟S130至步驟S150的過程，在本發(fā)明的圖片呈現(xiàn)方法100中，頁面呈現(xiàn)時，在步驟S130中下載、解析和渲染未注冊的圖片2012和2013以及2021，然后在步驟S140中判斷注冊的區(qū)塊201和202是否要呈現(xiàn)，當區(qū)塊201位于瀏覽器的當前窗口中時，判定區(qū)塊201需要立即呈現(xiàn)，則在步驟S150中，下載區(qū)塊201中已注冊的需要延遲加載的圖片2011的內(nèi)容，并進行解析和渲染以呈現(xiàn)圖片；在步驟S140中，由于區(qū)塊202不位于瀏覽器的當前窗口中，所以不需要下載區(qū)塊202中已注冊的需要延遲加載的圖片2022和2023的圖片內(nèi)容，從而不進行呈現(xiàn)，而當瀏覽器的當前窗口中呈現(xiàn)的內(nèi)容發(fā)生變化時，例如通過移動瀏覽器的當前窗口的滾動條使得當前窗口中呈現(xiàn)的區(qū)塊變?yōu)?02時，再返回步驟S140，判斷注冊的區(qū)塊201和202是否要呈現(xiàn)，這時，判斷區(qū)塊202要呈現(xiàn)而區(qū)塊201不呈現(xiàn)，則需要下載區(qū)塊202中需要延遲加載的圖片2022和2023的圖片內(nèi)容并
進行解析和渲染。關(guān)于此部分的實現(xiàn)代碼如下://當出現(xiàn)移動事件,或者onload事件，遍歷所有注冊的區(qū)塊中的內(nèi)容
body.0nload = body.0nscroll = function()(
var currentHeight = body.getScrollHeight();
var currentBlock = currentHeight / mutex; Il 當 H所在區(qū)塊
if(!blocks[currentBlock]){ //如果此區(qū)塊尚未加載過
loadBlock(currentBlock); //加載
blocks[currcntBiock] = true /7設置此區(qū)塊為已經(jīng)加栽
}
//否則等待下一個時機
};
function !oadBiock(i){
target—bl ock = getTargetElement(i); //省略掉部分邏輯$('img[data-]azy]oad]', target_biock).each(function() {var $this = $(this);
$this.attr('src', $this.data(' data-lazyload ')):
//即把圖片的屬性“data-lazyload”中的值復制給屬性“sre”，從而保證瀏覽器引擎可以去下載該圖片的圖片數(shù)據(jù)。
})；
}在步驟S150下載注冊的區(qū)塊中的需要延時呈現(xiàn)的注冊的圖片后，在步驟S160中，呈現(xiàn)所下載的位于瀏覽器的當前窗口中的圖片，這里的圖片包括所下載的未注冊的圖片和下載的注冊的圖片。需要說明的是，圖1所示的方法并不限定按所示的各步驟的順序進行，可以根據(jù)需要調(diào)整各步驟的先后順序，例如步驟S140 步驟S160，也可在步驟S130之前，另外，所述步驟也不限定于上述步驟劃分，上述步驟可以進一步拆分成更多步驟也可以合并成更少步驟。下面結(jié)合圖3說明根據(jù)本發(fā)明一個實施例的、適于解決上述問題的一種頁面中的圖片呈現(xiàn)設備300。如圖3所示，本發(fā)明實施例的頁面中的圖片呈現(xiàn)設備300包括:區(qū)塊劃分器310、區(qū)塊注冊器320、圖片渲染器340、區(qū)塊呈現(xiàn)判定器330和圖片呈現(xiàn)器350。其中，區(qū)塊劃分器310被配置為將頁面劃分為多個區(qū)塊?？蛇x地，區(qū)塊劃分器310被配置為在瀏覽器窗口的高度方向上將頁面劃分為多個區(qū)塊，其中，每個區(qū)塊中可以放置一個或多個圖片，該圖片可以是靜態(tài)圖片或動態(tài)圖片。通過對區(qū)塊中的圖片進行管理，實現(xiàn)各圖片不同的呈現(xiàn)方式，例如有的圖片無需注冊即可直接呈現(xiàn)，而有的圖片需注冊，然后再根據(jù)條件確定何時呈現(xiàn)?？蛇x地，可在瀏覽器窗口的高度方向(即瀏覽器窗口的Y軸方向)上將頁面劃分為多個區(qū)塊(block)。例如，如圖2所示，一個HTML文檔所形成的頁面200根據(jù)瀏覽器窗口 210的高度在瀏覽器的Y軸方向上被劃分成多個區(qū)塊，為了圖示清晰起見，圖2中只示出了兩個區(qū)塊201和202，實際上可以包括若干個區(qū)塊。在呈現(xiàn)頁面期間，可以記錄劃分出的多個區(qū)塊。例如，可以在頁面加載期間，利用在頁面加載時運行的JS腳本來注冊所劃分的區(qū)塊。在區(qū)塊201中，包含三個圖片2011、2012、和2013，其中圖片2011為需要延時呈現(xiàn)的圖片，而圖片2012和2013為即時呈現(xiàn)的圖片。在區(qū)塊202中，包含三個圖片2021、2022、和2023，其中圖片2022和2023為需要延時呈現(xiàn)的圖片，而圖片2021為即時呈現(xiàn)的圖片。區(qū)塊注冊器320對區(qū)塊劃分器310所劃分出的各區(qū)塊進行注冊，并對各區(qū)塊中需要延時呈現(xiàn)的圖片進行注冊。例如，對于圖2所示的頁面200，其中需要延時呈現(xiàn)的圖片2011,2022和2023要進行注冊?？蛇x地，區(qū)塊注冊器320將需要延時呈現(xiàn)的圖片的地址信息嵌入到圖片標簽的自定義標簽屬性中，例如，部分實現(xiàn)代碼如下:〈img data-lazyload="圖片的地址信息"width="90"height="64"alt=""/>在上述代碼中，需要延時呈現(xiàn)的圖片的圖片標簽img中沒有圖片的地址信息(即，沒有“src="圖片的地址〃”部分)，而是將需要延時呈現(xiàn)的圖片的地址信息嵌入到圖片標簽img的自定義標簽屬性中，例如該自定義標簽屬性可以是延遲加載屬性(data-lazyload)。因此，當頁面在解析需要延時呈現(xiàn)的圖片的圖片標簽img時，由于需要延時呈現(xiàn)的圖片的圖片標簽img中沒有關(guān)鍵的圖片的地址信息，使得在該頁面中不會立即呈現(xiàn)圖片，而是會根據(jù)圖片標簽的自定義標簽屬性延遲呈現(xiàn)該圖片。區(qū)塊呈現(xiàn)判定器330被配置為判斷是否要呈現(xiàn)所注冊的區(qū)塊?？蛇x地，區(qū)塊呈現(xiàn)判定器330通過判斷所注冊的區(qū)塊是否位于瀏覽器的當前窗口中來判斷是否要呈現(xiàn)；或者，區(qū)塊呈現(xiàn)判定器330通過判斷注冊的區(qū)塊在瀏覽器窗口的滾動條移動時是否可見來判斷是否要呈現(xiàn)。其中，位于瀏覽器的當前窗口中的區(qū)塊是指頁面中在瀏覽當前窗口中顯示的區(qū)塊。通常一個HTML文檔形成的頁面的整體高度高于瀏覽器窗口的高度，所以只有一部分的頁面會在瀏覽當前窗口中顯示，其它的部分將處于不可見區(qū)域，即處于隱藏的狀態(tài)，而處于不可見區(qū)域的部分可以通過移動瀏覽器的滾動條來查看。如圖2所示的頁面200，區(qū)塊201位于瀏覽器的當前窗口 210中，而區(qū)塊202未處于瀏覽器的當前窗口 210中，所以，區(qū)塊201被判斷為要呈現(xiàn)，而區(qū)塊202被判斷為不呈現(xiàn)?？蛇x地，如果區(qū)塊202通過瀏覽器的滾動條可以呈現(xiàn)，那么區(qū)塊202也被判斷為要呈現(xiàn)。圖片渲染器340被配置為在瀏覽器中下載該頁面中未注冊的圖片，以及在瀏覽器中下載區(qū)塊呈現(xiàn)判定器330判定呈現(xiàn)的區(qū)塊中需要延時呈現(xiàn)的注冊的圖片。其中，對于頁面中未注冊的圖片，在瀏覽器中直接解析、渲染、并下載，然后進行呈現(xiàn)，具體過程可參照步驟S130的描述；而對于區(qū)塊呈現(xiàn)判定器330判定呈現(xiàn)的區(qū)塊中需要延時呈現(xiàn)的注冊的圖片，在瀏覽器中并不能直接下載而呈現(xiàn)，因為在需要延時呈現(xiàn)的圖片的圖片標簽img中沒有圖片的地址信息或者src中沒有賦值，這時，圖片渲染器340可以將需要延時呈現(xiàn)的注冊的圖片的地址信息從圖片標簽的自定義標簽屬性復制到圖片標簽的源地址屬性中，以便瀏覽器可以根據(jù)圖片標簽的地址信息去下載該圖片。這里，頁面的解析、渲染和下載可以是瀏覽器將圖片根據(jù)HTML規(guī)范定義的規(guī)則而準備要顯示在瀏覽器窗口中的頁面內(nèi)容的過程?？蛇x地，當瀏覽器的當前窗口上呈現(xiàn)的內(nèi)容發(fā)生變化時，區(qū)塊呈現(xiàn)判定器330判斷上述注冊的區(qū)塊是否要呈現(xiàn)，如果要呈現(xiàn)，則由圖片渲染器340來下載該注冊的區(qū)塊中需要延時呈現(xiàn)的注冊的圖片。圖片呈現(xiàn)器350被配置為呈現(xiàn)由圖片渲染器340所下載的、位于瀏覽器的當前窗口中的圖片，這里的圖片包括所下載的未注冊的圖片和下載的注冊的圖片。根據(jù)本發(fā)明的設備，其中當瀏覽器的當前窗口上呈現(xiàn)的內(nèi)容發(fā)生變化時，所述區(qū)塊呈現(xiàn)判定器判斷所述注冊的區(qū)塊是否要呈現(xiàn)，如果要呈現(xiàn)，則由所述圖片渲染器來下載所述注冊的區(qū)塊中需要延時呈現(xiàn)的注冊的圖片。根據(jù)本發(fā)明的設備，其中所述圖片渲染器將圖片的地址信息從所述圖片標簽的自定義標簽屬性復制到圖片標簽的源地址屬性中，以便瀏覽器可以根據(jù)圖片標簽的內(nèi)容去下載所述圖片。在此提供的算法和顯示不與任何特定計算機、虛擬系統(tǒng)或者其它設備固有相關(guān)。各種通用系統(tǒng)也可以與基于在此的示教一起使用。根據(jù)上面的描述，構(gòu)造這類系統(tǒng)所要求的結(jié)構(gòu)是顯而易見的。此外，本發(fā)明也不針對任何特定編程語言。應當明白，可以利用各種編程語言實現(xiàn)在此描述的本發(fā)明的內(nèi)容，并且上面對特定語言所做的描述是為了披露本發(fā)明的最佳實施方式。在此處所提供的說明書中，說明了大量具體細節(jié)。然而，能夠理解，本發(fā)明的實施例可以在沒有這些具體細節(jié)的情況下實踐。在一些實例中，并未詳細示出公知的方法、結(jié)構(gòu)和技術(shù)，以便不模糊對本說明書的理解。類似地，應當理解，為了精簡本公開并幫助理解各個發(fā)明方面中的一個或多個，在上面對本發(fā)明的示例性實施例的描述中，本發(fā)明的各個特征有時被一起分組到單個實施例、圖、或者對其的描述中。然而，并不應將該公開的方法解釋成反映如下意圖:即所要求保護的本發(fā)明要求比在每個權(quán)利要求中所明確記載的特征更多的特征。更確切地說，如下面的權(quán)利要求書所反映的那樣，發(fā)明方面在于少于前面公開的單個實施例的所有特征。因此，遵循具體實施方式
的權(quán)利要求書由此明確地并入該具體實施方式
，其中每個權(quán)利要求本身都作為本發(fā)明的單獨實施例。本領(lǐng)域那些技術(shù)人員可以理解，可以對實施例中的設備中的模塊進行自適應性地改變并且把它們設置在與該實施例不同的一個或多個設備中。可以把實施例中的模塊或單元或組件組合成一個模塊或單元或組件，以及此外可以把它們分成多個子模塊或子單元或子組件。除了這樣的特征和/或過程或者單元中的至少一些是相互排斥之外，可以采用任何組合對本說明書(包括伴隨的權(quán)利要求、摘要和附圖)中公開的所有特征以及如此公開的任何方法或者設備的所有過程或單元進行組合。除非另外明確陳述，本說明書(包括伴隨的權(quán)利要求、摘要和附圖)中公開的每個特征可以由提供相同、等同或相似目的的替代特征來代替。此外，本領(lǐng)域的技術(shù)人員能夠理解，盡管在此所述的一些實施例包括其它實施例中所包括的某些特征而不是其它特征，但是不同實施例的特征的組合意味著處于本發(fā)明的范圍之內(nèi)并且形成不同的實施例。例如，在下面的權(quán)利要求書中，所要求保護的實施例的任意之一都可以以任意的組合方式來使用。本發(fā)明的各個部件實施例可以以硬件實現(xiàn)，或者以在一個或者多個處理器上運行的軟件模塊實現(xiàn)，或者以它們的組合實現(xiàn)。本領(lǐng)域的技術(shù)人員應當理解，可以在實踐中使用微處理器或者數(shù)字信號處理器(DSP)來實現(xiàn)根據(jù)本發(fā)明實施例的頁面中的圖片呈現(xiàn)設備中的一些或者全部部件的一些或者全部功能。本發(fā)明還可以實現(xiàn)為用于執(zhí)行這里所描述的方法的一部分或者全部的設備或者裝置程序(例如，計算機程序和計算機程序產(chǎn)品)。這樣的實現(xiàn)本發(fā)明的程序可以存儲在計算機可讀介質(zhì)上，或者可以具有一個或者多個信號的形式。這樣的信號可以從因特網(wǎng)網(wǎng)站上下載得到，或者在載體信號上提供，或者以任何其他形式提供。應該注意的是上述實施例對本發(fā)明進行說明而不是對本發(fā)明進行限制，并且本領(lǐng)域技術(shù)人員在不脫離所附權(quán)利要求的范圍的情況下可設計出替換實施例。在權(quán)利要求中，不應將位于括號之間的任何參考符號構(gòu)造成對權(quán)利要求的限制。單詞“包含”不排除存在未列在權(quán)利要求中的元件或步驟。位于元件之前的單詞“一”或“一個”不排除存在多個這樣的元件。本發(fā)明可以借助于包括有若干不同元件的硬件以及借助于適當編程的計算機來實現(xiàn)。在列舉了若干裝置的單元權(quán)利要求中，這些裝置中的多個可以是通過同一個硬件項來具體體現(xiàn)。單詞第一、第二、以及第三等的使用不表示任何順序?？蓪⑦@些單詞解釋為名稱。
權(quán)利要求
1.一種頁面中的圖片呈現(xiàn)方法，包括步驟: 將頁面劃分為多個區(qū)塊并注冊； 對各區(qū)塊中需要延時呈現(xiàn)的圖片進行注冊； 在瀏覽器中下載所述頁面中未注冊的圖片； 判斷所述注冊的區(qū)塊是否要呈現(xiàn)，如果要呈現(xiàn)，則在瀏覽器中下載所述注冊的區(qū)塊中需要延時呈現(xiàn)的注冊的圖片；以及 呈現(xiàn)所下載的位于瀏覽器的當前窗口中的圖片。
2.根據(jù)權(quán)利要求1所述的方法，其中對各區(qū)塊中需要延時呈現(xiàn)的圖片進行注冊的步驟包括: 將需要延時呈現(xiàn)的圖片的地址信息嵌入到圖片標簽的自定義標簽屬性中。
3.根據(jù)權(quán)利要求1或者2所述的方法，其中，所述判斷所述注冊的區(qū)塊是否要呈現(xiàn)的步驟包括: 判斷所述注冊的區(qū)塊是否位于瀏覽器的當前窗口中。
4.根據(jù)權(quán)利要求1或者2所述的方法，其中所述判斷所述注冊的區(qū)塊是否需要呈現(xiàn)的步驟包括: 判斷所述注冊的區(qū)塊在瀏覽器窗口的滾動條移動時是否可見。
5.根據(jù)權(quán)利要求1-4中任一所述的方法，還包括步驟， 當瀏覽器的當前窗口中呈現(xiàn)的內(nèi)容發(fā)生變化時，判斷所述注冊的區(qū)塊是否要呈現(xiàn)，如果要呈現(xiàn)，則下載所述注冊的區(qū)塊中需要延時呈現(xiàn)的注冊的圖片。
6.如權(quán)利要求1-5中任一所述的方法，其中下載所述注冊的區(qū)塊中需要延時呈現(xiàn)的注冊圖片包括步驟: 將圖片的地址信息從所述圖片標簽的自定義標簽屬性復制到圖片標簽的源地址屬性中，以便瀏覽器可以根據(jù)圖片標簽的內(nèi)容去下載所述圖片。
7.一種頁面中的圖片呈現(xiàn)設備，包括: 區(qū)塊劃分器，被配置為將頁面劃分為多個區(qū)塊； 區(qū)塊注冊器，被配置為對各區(qū)塊進行注冊，并對各區(qū)塊中需要延時呈現(xiàn)的圖片進行注ΠΠ冊; 圖片渲染器，被配置為在瀏覽器中下載所述頁面中未注冊的圖片； 區(qū)塊呈現(xiàn)判定器，被配置為判斷所述注冊的區(qū)塊是否要呈現(xiàn)，如果要呈現(xiàn)，則由所述圖片渲染器在瀏覽器中下載所述注冊的區(qū)塊中需要延時呈現(xiàn)的注冊的圖片；以及 圖片呈現(xiàn)器，被配置為呈現(xiàn)由圖片渲染器所下載的、位于瀏覽器的當前窗口中的圖片。
8.如權(quán)利要求7所述的設備，其中所述區(qū)塊注冊器將需要延時呈現(xiàn)的圖片的地址信息嵌入到圖片標簽的自定義標簽屬性中。
9.如權(quán)利要求7或者8所述的設備，其中所述區(qū)塊呈現(xiàn)判定器通過判斷所注冊的區(qū)塊是否位于瀏覽器的當前窗口中來判斷所注冊的區(qū)塊是否要呈現(xiàn)。
10.如權(quán)利要求7或者8所述的設備，其中所述區(qū)塊呈現(xiàn)判定器通過判斷所述注冊的區(qū)塊在瀏覽器窗口的滾動條移動時是否可見來判斷是否要呈現(xiàn)所述注冊的區(qū)塊。
全文摘要
本發(fā)明公開了一種頁面中的圖片呈現(xiàn)方法及設備，包括步驟將頁面劃分為多個區(qū)塊并注冊；對各區(qū)塊中需要延時呈現(xiàn)的圖片進行注冊；在瀏覽器中下載所述頁面中未注冊的圖片；判斷注冊的區(qū)塊是否要呈現(xiàn)，如果要呈現(xiàn)，則在瀏覽器中下載注冊的區(qū)塊中需要延時呈現(xiàn)的注冊的圖片；以及呈現(xiàn)所下載的位于瀏覽器的當前窗口中的圖片。由于瀏覽器會把網(wǎng)絡資源分配給下載需要呈現(xiàn)的圖片，從而能夠合理運用網(wǎng)絡資源，提高頁面的加載速度。
文檔編號G06F17/30GK103164541SQ20131012974
公開日2013年6月19日 申請日期2013年4月15日 優(yōu)先權(quán)日2013年4月15日
發(fā)明者黃歡 申請人:北京奇虎科技有限公司, 奇智軟件(北京)有限公司