一種定位圖片系統(tǒng)及方法
【技術(shù)領(lǐng)域】
[0001]本發(fā)明涉及圖片處理技術(shù)領(lǐng)域，尤指一種在網(wǎng)頁中定位及顯示圖片的方法。
【背景技術(shù)】
[0002]為了使網(wǎng)站豐富多彩，更有表現(xiàn)力，網(wǎng)頁中往往需要應(yīng)用到大量的圖片，但如何處理這些圖片，并且使其不影響網(wǎng)頁載入和解析是一個不小的問題，這直接關(guān)系到用戶體驗(yàn)。
[0003]目前的做法是，需要哪張圖片就處理哪張圖片，在網(wǎng)頁上需要顯示圖片的區(qū)域單獨(dú)引用并加載某一張或某一組特定圖片。此方法在做圖片切換時，如果做了兩張不同的圖片時，若網(wǎng)絡(luò)信號或網(wǎng)絡(luò)速度不佳，后續(xù)圖片不能及時加載并顯示出來，并且如果圖片較大加載需要等待較長的時間，這樣會經(jīng)常出現(xiàn)圖片丟失，未加載等現(xiàn)象，影響用戶瀏覽網(wǎng)頁信息。

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

[0004]本發(fā)明為了解決上述技術(shù)在網(wǎng)速不佳狀態(tài)下無法順暢顯示圖片的問題，提供一種利用多幅合成圖片提高網(wǎng)頁中圖片的加載及顯示速度，提高用戶訪問網(wǎng)頁時的流暢度。
[0005]為了實(shí)現(xiàn)本發(fā)明以上發(fā)明目的，本發(fā)明是通過以下技術(shù)方案實(shí)現(xiàn)的:
[0006]這種定位圖片系統(tǒng)，包括:圖片合成模塊，用于將多幅圖片生成一個合成圖片文件；圖片定位模塊，用于在合成圖片中定位所需顯示的圖片；圖片顯示模塊，用于顯示定位后的圖片；所述圖片定位模塊加載圖片合成模塊生成的合成圖片文件并定位所需顯示的文件后通過圖片顯示模塊在網(wǎng)頁上進(jìn)行展示。
[0007]所述合成模塊包括圖片輸入模塊和圖片輸出模塊，所述圖片輸出模塊用于將圖片輸入模塊輸入的多幅圖片按照系統(tǒng)參數(shù)輸出為一個合成圖片文件。
[0008]所述系統(tǒng)參數(shù)包括圖片尺寸，圖片分辨率，圖片排布位置及方式。
[0009]所述圖片定位模塊采用CSS樣式進(jìn)行處理，包括屬性定義模塊和位置定義模塊；所述屬性定義模塊用于加載所需的合成圖片以及定義圖片顯示方式；所述位置定義模塊通過設(shè)定像素值定義欲顯示的圖片在合成圖片中的位置。
[0010]所述圖片顯示方式包括平鋪、重復(fù)。
[0011]所述圖片顯示模塊包括圖片對象模塊和圖片截取模塊；所述圖片對象模塊用于在網(wǎng)頁上顯示圖片；所述圖片截取模塊根據(jù)網(wǎng)頁上的圖片對象的尺寸屬性，截取對應(yīng)尺寸的定位圖片并在圖片對象中顯示。
[0012]將欲在網(wǎng)頁中顯示的多個圖片文件按照合成規(guī)則合并為一個合成圖片文件，通過在網(wǎng)頁中需要顯示圖片的位置通過定義CSS(層疊樣式表)加載合成圖片文件并定位合成圖片文件中單個圖片文件的位置，實(shí)現(xiàn)所需圖片在網(wǎng)頁中的顯示。
[0013]網(wǎng)頁中需要顯示圖片的位置建立圖片對象并定義一個CSS樣式并將其背景屬性值定義為加載合成圖片文件；
[0014]設(shè)置背景屬性中的合成圖片的顯示方式為不重復(fù)顯示；
[0015]設(shè)置背景屬性中的邊距參數(shù)來獲取合成圖片中單個圖片的位置參數(shù)；
[0016]根據(jù)網(wǎng)頁中圖片對象的高度值和寬度值對定位后的單個圖片進(jìn)行截取并在圖片對象中顯示。
[0017]本發(fā)明通過將多幅圖片按照一定的合成規(guī)則合并在一個合成圖片文件中，當(dāng)瀏覽網(wǎng)頁時，只需加載一張圖片文件，便等于加載了此網(wǎng)頁所需顯示的所有圖片。再通過對CSS(層疊樣式表)的屬性設(shè)置，將此合成圖片文件設(shè)置為背景圖片，通過設(shè)置背景圖片的邊距值使得背景圖片進(jìn)行相對移動，使得網(wǎng)頁中圖片顯示位置能夠顯示所需的包含在合并圖片文件中的對應(yīng)圖片。這種對同一圖片文件單次加載，多次使用的應(yīng)用方式無疑大大降低了網(wǎng)頁中較多圖片顯示時的延時以及圖片顯示不全現(xiàn)象。
【附圖說明】
[0018]下面結(jié)合附圖和【具體實(shí)施方式】對本發(fā)明作進(jìn)一步詳細(xì)說明:
[0019]圖1為定位圖片系統(tǒng)的第一實(shí)施例示意圖；
[0020]圖2為定位圖片方法的第一實(shí)施例流程示意圖；
[0021]圖3為定位圖片系統(tǒng)的第二實(shí)施例示意圖；
[0022]圖4為定位圖片系統(tǒng)的第二實(shí)施例的通過CSS定位并顯示合成圖片文件中單個圖片文件的流程示意圖；
[0023]圖5為定位圖片系統(tǒng)的第三實(shí)施例的合成圖片文件示意圖；
[0024]圖中:
[0025]I圖片合并模塊L1圖片輸入模塊L 2圖片輸出模塊2圖片定位模塊2」屬性定義模塊2.2位置定義模塊3圖像顯示模塊3.1圖片對象模塊3.2圖片截取模塊。
【具體實(shí)施方式】
[0026]為了更清楚地說明本發(fā)明實(shí)施例或現(xiàn)有技術(shù)中的技術(shù)方案，下面將對實(shí)施例或現(xiàn)有技術(shù)描述中所需要使用的附圖作簡單地介紹，顯而易見地，以下說明和附圖對于本發(fā)明是示例性的，并且不應(yīng)被理解為限制本發(fā)明。以下說明描述了眾多具體細(xì)節(jié)以方便對本發(fā)明理解。然而，在某些實(shí)例中，熟知的或常規(guī)的細(xì)節(jié)并未說明，以滿足說明書簡潔的要求。
[0027]CSS，全稱為Cascading Style Sheets，中文名為層疊樣式表，也稱作層疊樣式表，是一種用來表現(xiàn)HTML(標(biāo)準(zhǔn)通用標(biāo)記語言的一個應(yīng)用)或XML(標(biāo)準(zhǔn)通用標(biāo)記語言的一個子集)等文件樣式的計(jì)算機(jī)語言。通過樣式表可以定義如何顯示HTML元素，例如字體標(biāo)簽和顏色屬性等。樣式通常保存在外部的.css文件中。通過僅僅編輯一個簡單的CSS文檔，外部樣式表能夠同時改變站點(diǎn)中所有頁面的布局和外觀，只需簡單地改變樣式，然后網(wǎng)站中的所有元素均會自動地更新。
[0028]CSS樣式包括背景、文本、字體、鏈接、列表、表格和輪廓。CSS的背景屬性允許應(yīng)用純色為背景，也允許使用圖像作為背景。CSS的文本屬性可以改變文字的顏色、字符間距、對齊文本等。CSS的字體屬性可以定義文本所使用的字體、大小，風(fēng)格(如斜體)等。
[0029]第一實(shí)施例
[0030]如圖1所示的定位圖片系統(tǒng)的第一實(shí)施例示意圖以及如圖2所示的定位圖片方法的第一實(shí)施例流程示意圖，這種定位圖片系統(tǒng)，包括:圖片合成模塊1，用于將多幅圖片生成一個合成圖片文件；圖片定位模塊2，用于在合成圖片中定位所需顯示的圖片；圖片顯示模塊3，用于顯示定位后的圖片；所述圖片定位模塊加載圖片合成模塊生成的合成圖片文件并定位所需顯示的文件后通過圖片顯示模塊在網(wǎng)頁上進(jìn)行展示。
[0031]第二實(shí)施例
[0032]如圖3所示的定位圖片系統(tǒng)的第二實(shí)施例示意圖，圖片合成模塊I包括圖片輸入模塊1.1和圖片輸出模塊1.2，圖片輸出模塊1.2用于將圖片輸入模塊1.1輸入的多幅圖片按照系統(tǒng)參數(shù)輸出為一個合成圖片文件。
[0033]系統(tǒng)參數(shù)包括圖片尺寸，圖片分辨率，圖片排布位置及方式