專利名稱：：頁(yè)面背景圖合并顯示的方法及裝置的制作方法
技術(shù)領(lǐng)域：
：本發(fā)明涉及網(wǎng)絡(luò)
技術(shù)領(lǐng)域：
，尤其涉及一種互聯(lián)網(wǎng)門(mén)戶網(wǎng)站的頁(yè)面背景圖合并顯示的方法及裝置。
背景技術(shù)：
：目前，互聯(lián)網(wǎng)門(mén)戶網(wǎng)站的頁(yè)面，特別是首頁(yè)以及頻道頁(yè)面等大頁(yè)面中，為了使頁(yè)面效果美觀，頁(yè)面中插入有數(shù)量繁多的零星小背景圖片，如圖標(biāo)、按鈕背景圖、欄目背景圖、標(biāo)題背景圖等。在下載頁(yè)面時(shí)，瀏覽器需向服務(wù)器逐一請(qǐng)求下載這些小背景圖片，造成大量的并發(fā)請(qǐng)求和較大的數(shù)據(jù)流量，不但影響瀏覽器頁(yè)面下載速度和響應(yīng)速度，而且還會(huì)對(duì)服務(wù)器造成高并發(fā)與較大的下載量?，F(xiàn)有技術(shù)中，為了解決上述問(wèn)題，通常采用類似Wiotoshop的圖片處理工具將小圖片在大畫(huà)布中進(jìn)行平鋪、整齊排列，生成合并后的大圖片，再利用CSSSprites(CascadingStyleSheetSprites，疊層樣式表圖像拼合)技術(shù)將合并后的大圖片進(jìn)行顯示，CSSSprites技術(shù)能夠通過(guò)圖片顯示容器及定位技術(shù)，顯示一張大圖片的部分區(qū)域，該技術(shù)主要處理對(duì)象為背景圖片。因此其可以將門(mén)戶頁(yè)面中數(shù)量繁多的小背景圖，平鋪合并為一張大圖片，在頁(yè)面中原有需要顯示小圖片的區(qū)域?qū)⑿D片顯示出來(lái)。通過(guò)該方法，原有如幾十張小圖片將合并為一張圖片通過(guò)瀏覽器下載，圖片并發(fā)請(qǐng)求數(shù)從幾十次降到一次，而多張圖片合并后，由于減少了圖片文件頭等信息，一張圖片的存儲(chǔ)容量比原有多張圖片的總存儲(chǔ)容量要小，減少了網(wǎng)絡(luò)請(qǐng)求次數(shù)，并節(jié)省數(shù)據(jù)包的數(shù)量及總流量。但是上述顯示圖片的方法存在以下不足網(wǎng)站設(shè)計(jì)人員要通過(guò)類似Wiotoshop的圖片處理工具將小圖片在大畫(huà)布中進(jìn)行平鋪、整齊排列，再生成合并后的圖片。在設(shè)計(jì)頁(yè)面時(shí)，不能像傳統(tǒng)方法設(shè)計(jì)頁(yè)面一樣直接插入小圖片，不但要計(jì)算小圖片的坐標(biāo)值，還要寫(xiě)入大量代碼進(jìn)行顯示控制，費(fèi)時(shí)費(fèi)力。
發(fā)明內(nèi)容本發(fā)明的主要目的在于提供一種頁(yè)面背景圖合并顯示的方法及裝置，旨在提高采用傳統(tǒng)方法設(shè)計(jì)的門(mén)戶網(wǎng)站頁(yè)面的下載速度，減少頁(yè)面圖片請(qǐng)求數(shù)量及網(wǎng)絡(luò)數(shù)據(jù)訪問(wèn)流量。本發(fā)明提出一種頁(yè)面背景圖合并顯示的方法，包括讀取原頁(yè)面文件中的零星圖片信息；根據(jù)所述零星圖片信息將所述零星圖片在畫(huà)布中合并生成預(yù)定格式的組合圖片；根據(jù)所述組合圖片中零星圖片長(zhǎng)寬值、圖片顯示標(biāo)簽以及所述零星圖片在畫(huà)布中對(duì)應(yīng)的坐標(biāo)值，將組合圖片中的零星圖片還原顯示在圖片顯示標(biāo)簽對(duì)應(yīng)的區(qū)域。優(yōu)選地，根據(jù)所述組合圖片中零星圖片長(zhǎng)寬值、圖片顯示標(biāo)簽以及所述零星圖片在畫(huà)布中對(duì)應(yīng)的坐標(biāo)值，將組合圖片中的零星圖片還原顯示在圖片顯示標(biāo)簽對(duì)應(yīng)的區(qū)域的步驟之后還包括生成新頁(yè)面文件；將所述新頁(yè)面文件通過(guò)網(wǎng)站后臺(tái)分發(fā)至網(wǎng)站門(mén)戶服務(wù)器中。優(yōu)選地，根據(jù)所述零星圖片信息將所述零星圖片在畫(huà)布中合并生成預(yù)定格式的組合圖片的步驟具體包括根據(jù)所述零星圖片信息將所述零星圖片按照預(yù)定規(guī)則排列在畫(huà)布中，并記錄所述零星圖片在畫(huà)布中與該零星圖片的圖片顯示標(biāo)簽對(duì)應(yīng)的坐標(biāo)值；將畫(huà)布中所有零星圖片合并生成預(yù)定格式的組合圖片。優(yōu)選地，根據(jù)所述組合圖片中零星圖片長(zhǎng)寬值、圖片顯示標(biāo)簽以及所述零星圖片在畫(huà)布中對(duì)應(yīng)的坐標(biāo)值，將組合圖片中的零星圖片還原顯示在圖片顯示標(biāo)簽對(duì)應(yīng)的區(qū)域的步驟具體包括根據(jù)所述零星圖片長(zhǎng)寬值、圖片顯示標(biāo)簽以及坐標(biāo)值，修改原頁(yè)面文件代碼；通過(guò)CSSSprite技術(shù)將組合圖片中的零星圖片還原顯示在圖片顯示標(biāo)簽對(duì)應(yīng)的區(qū)域，并為所述零星圖片設(shè)置與該零星圖片的圖片顯示標(biāo)簽對(duì)應(yīng)的樣式標(biāo)簽，以便網(wǎng)站后臺(tái)根據(jù)所述對(duì)應(yīng)的樣式標(biāo)簽生成新頁(yè)面文件。優(yōu)選地，所述預(yù)定格式包括JPEG、GIF和/或PNG格式。本發(fā)明提出一種頁(yè)面背景圖合并顯示的裝置，包括讀取模塊，用于讀取原頁(yè)面文件中的零星圖片信息；合并生成模塊，用于根據(jù)所述零星圖片信息將所述零星圖片在畫(huà)布中合并生成預(yù)定格式的組合圖片；還原顯示模塊，用于根據(jù)所述組合圖片中零星圖片長(zhǎng)寬值、圖片顯示標(biāo)簽以及所述零星圖片在畫(huà)布中對(duì)應(yīng)的坐標(biāo)值，并通過(guò)CSSSprite技術(shù)將組合圖片中的零星圖片還原顯示在圖片顯示標(biāo)簽對(duì)應(yīng)的區(qū)域。優(yōu)選地，所述裝置還包括生成模塊，用于生成新頁(yè)面文件；分發(fā)模塊，用于將所述新頁(yè)面文件通過(guò)網(wǎng)站后臺(tái)分發(fā)至網(wǎng)站門(mén)戶服務(wù)器中。優(yōu)選地，所述合并生成模塊具體包括排列單元，用于根據(jù)所述零星圖片信息將所述零星圖片按照預(yù)定規(guī)則排列在畫(huà)布中，并記錄所述零星圖片在畫(huà)布中與該零星圖片的圖片顯示標(biāo)簽對(duì)應(yīng)的坐標(biāo)值；合并生成單元，用于將畫(huà)布中所有零星圖片合并生成預(yù)定格式的組合圖片。優(yōu)選地，所述還原顯示模塊具體包括修改單元，用于根據(jù)所述零星圖片長(zhǎng)寬值、圖片顯示標(biāo)簽以及坐標(biāo)值，修改原頁(yè)面文件代碼；還原顯示單元，用于通過(guò)CSSSprite技術(shù)將組合圖片中的零星圖片還原顯示在圖片顯示標(biāo)簽對(duì)應(yīng)的區(qū)域，并為所述零星圖片設(shè)置與該零星圖片的圖片顯示標(biāo)簽對(duì)應(yīng)的樣式標(biāo)簽，以便生成模塊根據(jù)所述對(duì)應(yīng)的樣式標(biāo)簽生成新頁(yè)面文件。本發(fā)明一種頁(yè)面背景圖合并顯示的方法及裝置，通過(guò)將采用傳統(tǒng)方法設(shè)計(jì)的門(mén)戶網(wǎng)站頁(yè)面中多張小圖片或背景圖片合并生成一張大的組合圖片，并通過(guò)CSSSprite技術(shù)將合并生成的組合圖片中的各零星圖片即小圖片可以顯示在瀏覽器中圖片顯示標(biāo)簽對(duì)應(yīng)的各小圖片所處區(qū)域，當(dāng)在門(mén)戶網(wǎng)站上顯示或下載頁(yè)面時(shí)，頁(yè)面中各零星圖片可以一次性下載并顯示在網(wǎng)站頁(yè)面中，不僅提高門(mén)戶網(wǎng)站頁(yè)面下載速度和網(wǎng)絡(luò)響應(yīng)速度，而且減少頁(yè)面圖片并發(fā)請(qǐng)求數(shù)量及網(wǎng)絡(luò)數(shù)據(jù)訪問(wèn)流量，同時(shí)網(wǎng)站設(shè)計(jì)人員可使用傳統(tǒng)方法設(shè)計(jì)門(mén)戶網(wǎng)站頁(yè)面，提高了網(wǎng)站頁(yè)面設(shè)計(jì)效率以及用戶體驗(yàn)效果。圖1是本發(fā)明頁(yè)面背景圖合并顯示的方法一實(shí)施例流程示意圖；圖2是圖1所示的頁(yè)面背景圖合并顯示的方法中根據(jù)零星圖片信息將零星圖片在畫(huà)布中合并生成預(yù)定格式的組合圖片的具體流程示意圖；圖3是圖1所示的頁(yè)面背景圖合并顯示的方法中根據(jù)組合圖片中零星圖片長(zhǎng)寬值、圖片顯示標(biāo)簽以及所述零星圖片在畫(huà)布中對(duì)應(yīng)的坐標(biāo)值，將組合圖片中的零星圖片還原顯示在圖片顯示標(biāo)簽對(duì)應(yīng)的區(qū)域的具體流程示意圖；圖4是本發(fā)明頁(yè)面背景圖合并顯示的方法另一實(shí)施例流程示意圖；圖5是本發(fā)明頁(yè)面背景圖合并顯示的裝置一實(shí)施例結(jié)構(gòu)示意圖；圖6是圖5所示的頁(yè)面背景圖合并顯示的裝置中合并生成模塊的具體結(jié)構(gòu)示意圖；圖7是圖5所示的頁(yè)面背景圖合并顯示的裝置中還原顯示模塊的具體結(jié)構(gòu)示意圖；圖8是本發(fā)明頁(yè)面背景圖合并顯示的裝置另一實(shí)施例結(jié)構(gòu)示意圖。為了使本發(fā)明的技術(shù)方案更加清楚、明了，下面將結(jié)合附圖作進(jìn)一步詳述。具體實(shí)施例方式本發(fā)明實(shí)施例解決方案主要是通過(guò)將門(mén)戶網(wǎng)站頁(yè)面中多張小圖片或背景圖片(即本實(shí)施例中零星圖片)合并生成一張大圖片(即本實(shí)施例中組合圖片)，并通過(guò)CSSSprite技術(shù)將合并生成的大圖片中的各小圖片可以還原顯示在瀏覽器中圖片顯示標(biāo)簽對(duì)應(yīng)的各小圖片原所處區(qū)域，當(dāng)在門(mén)戶網(wǎng)站上顯示或下載頁(yè)面時(shí)，頁(yè)面中各小圖片可以一次性下載并顯示在網(wǎng)站頁(yè)面中，從而減少瀏覽器下載圖片時(shí)的并發(fā)請(qǐng)求次數(shù)。如圖1所示，本發(fā)明一實(shí)施例提出一種頁(yè)面背景圖合并顯示的方法，包括步驟101，讀取原頁(yè)面文件中的零星圖片信息；本實(shí)施例中，通過(guò)各門(mén)戶網(wǎng)站可以顯示下載帶有若干大小零星圖片的頁(yè)面文件，門(mén)戶網(wǎng)站可以由多臺(tái)門(mén)戶服務(wù)器集群構(gòu)成，每臺(tái)服務(wù)器上部署一致的門(mén)戶網(wǎng)站頁(yè)面，用戶可以使用不同載體(如臺(tái)式機(jī)、筆記本、平板電腦等)中的瀏覽器通過(guò)互聯(lián)網(wǎng)訪問(wèn)門(mén)戶網(wǎng)站。整個(gè)門(mén)戶網(wǎng)站可以通過(guò)統(tǒng)一的后臺(tái)管理系統(tǒng)進(jìn)行管理。本實(shí)施例中原頁(yè)面文件可以由網(wǎng)站頁(yè)面設(shè)計(jì)人員按照傳統(tǒng)頁(yè)面設(shè)計(jì)方式設(shè)計(jì)，即通過(guò)普通的可視化HTML頁(yè)面設(shè)計(jì)器設(shè)計(jì)頁(yè)面，該可視化HTML頁(yè)面設(shè)計(jì)器支持頁(yè)面中圖片的上傳、背景圖片的設(shè)置等功能。網(wǎng)站頁(yè)面設(shè)計(jì)人員可在后臺(tái)管理系統(tǒng)的可視化頁(yè)面設(shè)計(jì)器中設(shè)計(jì)或維護(hù)門(mén)戶網(wǎng)站的頁(yè)面。設(shè)計(jì)人員在進(jìn)行可視化頁(yè)面設(shè)計(jì)時(shí)，為達(dá)到美化頁(yè)面及實(shí)現(xiàn)各種特定功能的目的，可在頁(yè)面中插入各種零星圖片(小圖片或背景圖)，零星圖片可以通過(guò)上傳或在系統(tǒng)資源中選取的方式引入到頁(yè)面中。本實(shí)施例中，在對(duì)傳統(tǒng)方式設(shè)計(jì)的原頁(yè)面文件進(jìn)行處理時(shí)，首先讀取原頁(yè)面文件中各零星圖片信息，其中零星圖片信息包括圖片長(zhǎng)寬值和圖片顯示標(biāo)簽和/或圖片大小，其中圖片長(zhǎng)寬值比如200象素X200象素；圖片顯示標(biāo)簽包括圖片文件名以及圖片其它參數(shù)等；圖片大小比如圖片所占字節(jié)數(shù)等。本實(shí)施例處理的原頁(yè)面文件中圖片需符合預(yù)先設(shè)置的域值條件，域值條件可為用戶設(shè)定的圖片長(zhǎng)寬值，如200象素X200象素，圖片長(zhǎng)和寬不超過(guò)域值的視為符合域值條件，其中域值條件可由網(wǎng)站設(shè)計(jì)維護(hù)人員根據(jù)經(jīng)驗(yàn)和頁(yè)面應(yīng)用需要進(jìn)行設(shè)定。步驟102，根據(jù)零星圖片信息將零星圖片在畫(huà)布中合并生成預(yù)定格式的組合圖片；本實(shí)施例中，根據(jù)讀取到的零星圖片信息，按照預(yù)定規(guī)則將圖片排列平鋪在矩形畫(huà)布中，并記錄每個(gè)零星圖片的坐標(biāo)值，畫(huà)布的空白區(qū)域象素值為空或0。其中，排列平鋪時(shí)預(yù)定規(guī)則可以為將顏色相近的圖片盡量排列在一起，以便在生成預(yù)定格式的組合圖片時(shí)可以使圖片壓縮算法更高效，以及使壓縮后的各零星圖片更??；對(duì)于圖片長(zhǎng)寬相近的零星圖片可以在同一行或同一列放置，以使相同面積的畫(huà)布能夠整齊排列更多零星圖片。當(dāng)排列平鋪完所有零星圖片后，根據(jù)畫(huà)布中圖片排列的有效區(qū)域確定生成組合圖片的大小，再利用圖片壓縮算法，根據(jù)用戶需要設(shè)定生成JPEGCJointPhotographicExpertsGroup,聯(lián)合圖像專家小組)、GIF(GraphicsInterchangeFormat,圖像互換格式)或PNG(PortableNetworkGraphici^ormat，流式網(wǎng)絡(luò)圖形格式)等預(yù)定格式的大圖片即組合圖片。其中，可以為每個(gè)畫(huà)布設(shè)置排列零星圖片數(shù)量的上限值，超出上限值的零星圖片可以排列在另外一張組合圖片中生成。步驟103，根據(jù)組合圖片中零星圖片長(zhǎng)寬值、圖片顯示標(biāo)簽以及零星圖片在畫(huà)布中對(duì)應(yīng)的坐標(biāo)值，將組合圖片中的零星圖片還原顯示在圖片顯示標(biāo)簽對(duì)應(yīng)的區(qū)域。根據(jù)組合圖片中零星圖片長(zhǎng)寬值、圖片顯示標(biāo)簽以及零星圖片在畫(huà)布中對(duì)應(yīng)的坐標(biāo)值，采用頁(yè)面模板技術(shù)或?qū)ふ谊P(guān)鍵字替換技術(shù)等，修改頁(yè)面文件代碼，使該組合圖片中各零星圖片能通過(guò)CSSSprite圖片顯示容器及定位技術(shù)即本實(shí)施例所稱CSSSprite技術(shù)還原顯示在圖片顯示標(biāo)簽對(duì)應(yīng)的區(qū)域。其中，在CSSSprite技術(shù)中，為組合圖片中的每個(gè)零星圖片設(shè)置有一與該零星圖片的圖片顯示標(biāo)簽對(duì)應(yīng)的樣式標(biāo)簽，即，在將組合圖片中各零星圖片還原顯示在圖片顯示標(biāo)簽對(duì)應(yīng)的區(qū)域時(shí)，為每個(gè)零星圖片設(shè)置有與該零星圖片的圖片顯示標(biāo)簽對(duì)應(yīng)的樣式標(biāo)簽，該樣式標(biāo)簽通過(guò)零星圖片在畫(huà)布中的坐標(biāo)值與該零星圖片在原頁(yè)面文件中的圖片顯示標(biāo)簽對(duì)應(yīng)，可通過(guò)網(wǎng)站后臺(tái)管理系統(tǒng)中頁(yè)面處理引擎對(duì)組合圖片中各零星圖片的樣式標(biāo)簽進(jìn)行解析，從而將組合圖片中各零星圖片在圖片顯示標(biāo)簽對(duì)應(yīng)的區(qū)域進(jìn)行顯示，以便由網(wǎng)站后臺(tái)重新生成新頁(yè)面文件并通過(guò)網(wǎng)站后臺(tái)將新頁(yè)面文件分發(fā)至網(wǎng)站門(mén)戶服務(wù)器中。由此，通過(guò)CSSSprite技術(shù)使得載入網(wǎng)站頁(yè)面的零星圖片不會(huì)一幅一幅地慢慢顯示出來(lái)，并能用數(shù)字精確的定位出各零星圖片在原頁(yè)面文件中的位置，從而大大的提高了頁(yè)面的顯示性能，減少服務(wù)器的Http連接數(shù)，提高了網(wǎng)站的吞吐量。如圖2所示，其中步驟102具體包括步驟1021，根據(jù)零星圖片信息將零星圖片按照預(yù)定規(guī)則排列在畫(huà)布中，并記錄零星圖片在畫(huà)布中與該零星圖片的圖片顯示標(biāo)簽對(duì)應(yīng)的坐標(biāo)值；步驟1022，將畫(huà)布中所有零星圖片合并生成預(yù)定格式的組合圖片。如圖3所示，其中步驟103具體包括步驟1031，根據(jù)零星圖片長(zhǎng)寬值、圖片顯示標(biāo)簽以及坐標(biāo)值，修改原頁(yè)面文件代碼；步驟1032，通過(guò)CSSSprite技術(shù)將組合圖片中的零星圖片還原顯示在圖片顯示標(biāo)簽對(duì)應(yīng)的區(qū)域，并為零星圖片設(shè)置與該零星圖片的圖片顯示標(biāo)簽對(duì)應(yīng)的樣式標(biāo)簽，以便網(wǎng)站后臺(tái)根據(jù)對(duì)應(yīng)的樣式標(biāo)簽生成新頁(yè)面文件。如圖4所示，本發(fā)明另一實(shí)施例提出一種頁(yè)面背景圖合并顯示的方法，在上述實(shí)施例的基礎(chǔ)上，其中在步驟103之后還包括步驟104，生成新頁(yè)面文件并；步驟105，將新頁(yè)面文件通過(guò)網(wǎng)站后臺(tái)分發(fā)至網(wǎng)站門(mén)戶服務(wù)器中。本實(shí)施例中，當(dāng)生成新頁(yè)面文件之后，即可將該新頁(yè)面文件分發(fā)、部署到各個(gè)門(mén)戶集群服務(wù)器中，當(dāng)用戶訪問(wèn)網(wǎng)站時(shí)，新頁(yè)面文件即可在被訪問(wèn)網(wǎng)站頁(yè)面上進(jìn)行顯示、下載寸。本實(shí)施例通過(guò)將采用傳統(tǒng)方法設(shè)計(jì)的門(mén)戶網(wǎng)站頁(yè)面中多張小圖片或背景圖片合并生成一張大的組合圖片，并通過(guò)CSSSprite技術(shù)將合并生成的組合圖片中的各零星圖片即小圖片顯示在瀏覽器中圖片顯示標(biāo)簽對(duì)應(yīng)的各小圖片所處區(qū)域，當(dāng)在門(mén)戶網(wǎng)站上顯示或下載頁(yè)面時(shí)，頁(yè)面中各零星圖片可以一次性下載并顯示在網(wǎng)站頁(yè)面中，不僅提高門(mén)戶網(wǎng)站頁(yè)面下載速度和網(wǎng)絡(luò)響應(yīng)速度，而且減少頁(yè)面圖片并發(fā)請(qǐng)求數(shù)量及網(wǎng)絡(luò)數(shù)據(jù)訪問(wèn)流量，同時(shí)網(wǎng)站設(shè)計(jì)人員可使用傳統(tǒng)方法設(shè)計(jì)門(mén)戶網(wǎng)站頁(yè)面，提高了網(wǎng)站頁(yè)面設(shè)計(jì)效率以及用戶體驗(yàn)效果。如圖5所示，本發(fā)明一實(shí)施例提出一種頁(yè)面背景圖合并顯示的裝置，包括讀取模塊501，用于讀取原頁(yè)面文件中的零星圖片信息；合并生成模塊502，用于根據(jù)零星圖片信息將所述零星圖片在畫(huà)布中合并生成預(yù)定格式的組合圖片；還原顯示模塊503，用于根據(jù)組合圖片中零星圖片長(zhǎng)寬值、圖片顯示標(biāo)簽以及所述零星圖片在畫(huà)布中對(duì)應(yīng)的坐標(biāo)值，并通過(guò)CSSSprite技術(shù)將組合圖片中的零星圖片還原顯示在圖片顯示標(biāo)簽對(duì)應(yīng)的區(qū)域。如圖6所示，合并生成模塊502具體包括排列單元5021，用于根據(jù)零星圖片信息將所述零星圖片按照預(yù)定規(guī)則排列在畫(huà)布中，并記錄零星圖片在畫(huà)布中與該零星圖片的圖片顯示標(biāo)簽對(duì)應(yīng)的坐標(biāo)值；合并生成單元5022，用于將畫(huà)布中所有零星圖片合并生成預(yù)定格式的組合圖片。如圖7所示，還原顯示模塊503具體包括修改單元5031，用于根據(jù)零星圖片長(zhǎng)寬值、圖片顯示標(biāo)簽以及坐標(biāo)值，修改原頁(yè)面文件代碼；還原顯示單元5032，用于通過(guò)CSSSprite技術(shù)將組合圖片中的零星圖片還原顯示在圖片顯示標(biāo)簽對(duì)應(yīng)的區(qū)域，并為零星圖片設(shè)置與該零星圖片的圖片顯示標(biāo)簽對(duì)應(yīng)的樣式標(biāo)簽，以便網(wǎng)站后臺(tái)生成模塊根據(jù)對(duì)應(yīng)的樣式標(biāo)簽生成新頁(yè)面文件。如圖8所示，本發(fā)明另一實(shí)施例提出一種頁(yè)面背景圖合并顯示的裝置，在上述實(shí)施例的基礎(chǔ)上，該裝置還包括生成模塊504，用于生成新頁(yè)面文件；分發(fā)模塊505，用于將新頁(yè)面文件通過(guò)網(wǎng)站后臺(tái)分發(fā)至網(wǎng)站門(mén)戶服務(wù)器中。本發(fā)明實(shí)施例通過(guò)將采用傳統(tǒng)方法設(shè)計(jì)的門(mén)戶網(wǎng)站頁(yè)面中多張小圖片或背景圖片合并生成一張大的組合圖片，并通過(guò)CSSSprite技術(shù)將合并生成的組合圖片中的各零星圖片即小圖片可以顯示在瀏覽器中圖片顯示標(biāo)簽對(duì)應(yīng)的各小圖片所處區(qū)域，當(dāng)在門(mén)戶網(wǎng)站上顯示或下載頁(yè)面時(shí)，頁(yè)面中各零星圖片可以一次性下載并顯示在網(wǎng)站頁(yè)面中，不僅提高門(mén)戶網(wǎng)站頁(yè)面下載速度和網(wǎng)絡(luò)響應(yīng)速度，而且減少頁(yè)面圖片并發(fā)請(qǐng)求數(shù)量及網(wǎng)絡(luò)數(shù)據(jù)訪問(wèn)流量，同時(shí)網(wǎng)站設(shè)計(jì)人員可使用傳統(tǒng)方法設(shè)計(jì)門(mén)戶網(wǎng)站頁(yè)面，提高了網(wǎng)站頁(yè)面設(shè)計(jì)效率以及用戶體驗(yàn)效果。以上所述僅為本發(fā)明的優(yōu)選實(shí)施例，并非因此限制本發(fā)明的專利范圍，凡是利用本發(fā)明說(shuō)明書(shū)及附圖內(nèi)容所作的等效結(jié)構(gòu)或流程變換，或直接或間接運(yùn)用在其他相關(guān)的
技術(shù)領(lǐng)域：
，均同理包括在本發(fā)明的專利保護(hù)范圍內(nèi)。權(quán)利要求1.一種頁(yè)面背景圖合并顯示的方法，其特征在于，包括讀取原頁(yè)面文件中的零星圖片信息；根據(jù)所述零星圖片信息將所述零星圖片在畫(huà)布中合并生成預(yù)定格式的組合圖片；根據(jù)所述組合圖片中零星圖片長(zhǎng)寬值、圖片顯示標(biāo)簽以及所述零星圖片在畫(huà)布中對(duì)應(yīng)的坐標(biāo)值，將組合圖片中的零星圖片還原顯示在圖片顯示標(biāo)簽對(duì)應(yīng)的區(qū)域。2.根據(jù)權(quán)利要求1所述的方法，其特征在于，根據(jù)所述組合圖片中零星圖片長(zhǎng)寬值、圖片顯示標(biāo)簽以及所述零星圖片在畫(huà)布中對(duì)應(yīng)的坐標(biāo)值，將組合圖片中的零星圖片還原顯示在圖片顯示標(biāo)簽對(duì)應(yīng)的區(qū)域的步驟之后還包括生成新頁(yè)面文件；將所述新頁(yè)面文件通過(guò)網(wǎng)站后臺(tái)分發(fā)至網(wǎng)站門(mén)戶服務(wù)器中。3.根據(jù)權(quán)利要求1或2所述的方法，其特征在于，根據(jù)所述零星圖片信息將所述零星圖片在畫(huà)布中合并生成預(yù)定格式的組合圖片的步驟具體包括根據(jù)所述零星圖片信息將所述零星圖片按照預(yù)定規(guī)則排列在畫(huà)布中，并記錄所述零星圖片在畫(huà)布中與該零星圖片的圖片顯示標(biāo)簽對(duì)應(yīng)的坐標(biāo)值；將畫(huà)布中所有零星圖片合并生成預(yù)定格式的組合圖片。4.根據(jù)權(quán)利要求3所述的方法，其特征在于，根據(jù)所述組合圖片中零星圖片長(zhǎng)寬值、圖片顯示標(biāo)簽以及所述零星圖片在畫(huà)布中對(duì)應(yīng)的坐標(biāo)值，將組合圖片中的零星圖片還原顯示在圖片顯示標(biāo)簽對(duì)應(yīng)的區(qū)域的步驟具體包括根據(jù)所述零星圖片長(zhǎng)寬值、圖片顯示標(biāo)簽以及坐標(biāo)值，修改原頁(yè)面文件代碼；通過(guò)CSSSprite技術(shù)將組合圖片中的零星圖片還原顯示在圖片顯示標(biāo)簽中對(duì)應(yīng)的區(qū)域，并為所述零星圖片設(shè)置與該零星圖片的圖片顯示標(biāo)簽對(duì)應(yīng)的樣式標(biāo)簽，以便網(wǎng)站后臺(tái)根據(jù)所述對(duì)應(yīng)的樣式標(biāo)簽生成新頁(yè)面文件。5.根據(jù)權(quán)利要求4所述的方法，其特征在于，所述預(yù)定格式包括JPEG、GIF和/或PNG格式。6.一種頁(yè)面背景圖合并顯示的裝置，其特征在于，包括讀取模塊，用于讀取原頁(yè)面文件中的零星圖片信息；合并生成模塊，用于根據(jù)所述零星圖片信息將所述零星圖片在畫(huà)布中合并生成預(yù)定格式的組合圖片；還原顯示模塊，用于根據(jù)所述組合圖片中零星圖片長(zhǎng)寬值、圖片顯示標(biāo)簽以及所述零星圖片在畫(huà)布中對(duì)應(yīng)的坐標(biāo)值，并通過(guò)CSSSprite技術(shù)將組合圖片中的零星圖片還原顯示在圖片顯示標(biāo)簽對(duì)應(yīng)的區(qū)域。7.根據(jù)權(quán)利要求6所述的裝置，其特征在于，所述裝置還包括生成模塊，用于生成新頁(yè)面文件；分發(fā)模塊，用于將所述新頁(yè)面文件通過(guò)網(wǎng)站后臺(tái)分發(fā)至網(wǎng)站門(mén)戶服務(wù)器中。8.根據(jù)權(quán)利要求6或7所述的裝置，其特征在于，所述合并生成模塊具體包括排列單元，用于根據(jù)所述零星圖片信息將所述零星圖片按照預(yù)定規(guī)則排列在畫(huà)布中，并記錄所述零星圖片在畫(huà)布中與該零星圖片的圖片顯示標(biāo)簽對(duì)應(yīng)的坐標(biāo)值；合并生成單元，用于將畫(huà)布中所有零星圖片合并生成預(yù)定格式的組合圖片。9.根據(jù)權(quán)利要求8所述的裝置，其特征在于，所述還原顯示模塊具體包括修改單元，用于根據(jù)所述零星圖片長(zhǎng)寬值、圖片顯示標(biāo)簽以及坐標(biāo)值，修改原頁(yè)面文件代碼；還原顯示單元，用于通過(guò)CSSSprite技術(shù)將組合圖片中的零星圖片還原顯示在圖片顯示標(biāo)簽對(duì)應(yīng)的區(qū)域，并為所述零星圖片設(shè)置與該零星圖片的圖片顯示標(biāo)簽對(duì)應(yīng)的樣式標(biāo)簽，以便生成模塊根據(jù)所述對(duì)應(yīng)的樣式標(biāo)簽生成新頁(yè)面文件。全文摘要本發(fā)明涉及一種頁(yè)面背景圖合并顯示的方法及裝置，其中方法包括讀取原頁(yè)面文件中的零星圖片信息；根據(jù)零星圖片信息將零星圖片在畫(huà)布中合并生成預(yù)定格式的組合圖片；根據(jù)組合圖片中零星圖片長(zhǎng)寬值、圖片顯示標(biāo)簽以及零星圖片在畫(huà)布中對(duì)應(yīng)的坐標(biāo)值，將組合圖片中的零星圖片還原顯示在圖片顯示標(biāo)簽對(duì)應(yīng)的區(qū)域。通過(guò)本發(fā)明可將傳統(tǒng)方法設(shè)計(jì)的頁(yè)面中各零星圖片合并為一張大的組合圖片一次性下載并顯示在網(wǎng)站頁(yè)面中，不僅提高門(mén)戶網(wǎng)站頁(yè)面下載速度和網(wǎng)絡(luò)響應(yīng)速度，而且減少頁(yè)面圖片并發(fā)請(qǐng)求數(shù)量及網(wǎng)絡(luò)數(shù)據(jù)訪問(wèn)流量，同時(shí)網(wǎng)站設(shè)計(jì)人員可使用傳統(tǒng)方法設(shè)計(jì)門(mén)戶網(wǎng)站頁(yè)面，提高了網(wǎng)站頁(yè)面設(shè)計(jì)效率以及用戶體驗(yàn)效果。文檔編號(hào)G06F17/30GK102314434SQ20101021554公開(kāi)日2012年1月11日申請(qǐng)日期2010年6月30日優(yōu)先權(quán)日2010年6月30日發(fā)明者鄺宇鋒申請(qǐng)人:中興通訊股份有限公司