專利名稱：在網(wǎng)絡瀏覽器上實現(xiàn)圖片漸進漸出效果的方法和裝置的制作方法
在網(wǎng)絡瀏覽器上實現(xiàn)圖片漸進漸出效果的方法和裝置
技術領域：
本發(fā)明涉及網(wǎng)絡技術領域，尤其涉及一種在網(wǎng)絡瀏覽器上實現(xiàn)圖片漸進漸出效果的方法和裝置。
背景技術：
隨著網(wǎng)絡技術的發(fā)展，越來越多的瀏覽器可以實現(xiàn)圖片漸進漸出效果，使得圖片顯示不會顯得很突然。例如,傳統(tǒng)的Internet Explorer瀏覽器可以通過自帶的濾鏡功能來實現(xiàn)圖片漸進漸出效果。傳統(tǒng)的支持在多類瀏覽器上實現(xiàn)圖片漸進漸出的方法主要通過直接改變圖片的透明度屬性來實現(xiàn)。然而這種方法通常會導致圖片發(fā)生損壞，例如，當圖片尺寸大于一定寬度時，Internet Explore瀏覽器會導致圖片顯示不完整，出現(xiàn)局部的破損或在圖片上出現(xiàn)小白點等，從而影響了圖片顯示效果。

發(fā)明內(nèi)容
基于此，有必要提供一種不會對圖片造成損壞的在網(wǎng)絡瀏覽器上實現(xiàn)圖片漸進漸出效果的方法。一種在網(wǎng)絡瀏覽器上實現(xiàn)圖片漸進漸出效果的方法，包括以下步驟在圖片顯示區(qū)域上方設置遮罩層；加載當前需顯示的圖片，將所述圖片設置為可見；按照設定的時間間隔調(diào)整所述遮罩層的透明度。優(yōu)選的，在所述按照設定的時間間隔調(diào)整所述遮罩層的透明度的步驟之后還包括判斷是否還有下一張需顯示的圖片，若是，則隱藏所述當前需顯示的圖片；加載所述下一張需顯示的圖片，將所述下一張需顯示的圖片設置為可見；按照設定的時間間隔調(diào)整所述遮罩層的透明度。優(yōu)選的，所述按照設定的時間間隔調(diào)整所述遮罩層的透明度的步驟為按照設定的時間間隔以預設數(shù)值為單位降低或增加所述遮罩層的透明度。優(yōu)選的，所述遮罩層設置在所述圖片顯示區(qū)域的正上方，并與所述圖片顯示區(qū)域大小一致。此外，還有必要提供一種不會對圖片造成損壞的在網(wǎng)絡瀏覽器上實現(xiàn)圖片漸進漸出效果的裝置。一種在網(wǎng)絡瀏覽器上實現(xiàn)圖片漸進漸出效果的裝置，，包括設置模塊，用于在圖片顯示區(qū)域上方設置遮罩層；加載模塊，用于加載當前需顯示的圖片，并將所述圖片設置為可見；調(diào)整模塊，用于按照設定的時間間隔調(diào)整所述遮罩層的透明度。優(yōu)選的，還包括
判斷模塊，用于判斷是否還有下一張需顯示的圖片；所述調(diào)整模塊還用于當還有下一張需顯示的圖片時，隱藏所述當前需顯示的圖片;所述加載模塊還用于當還有下一張需顯示的圖片時，加載所述下一張需顯示的圖片，并將所述下一張需顯示的圖片設置為可見，以及通知所述調(diào)整模塊按照設定的時間間隔調(diào)整所述遮罩層的透明度。優(yōu)選的，所述調(diào)整模塊用于按照設定的時間間隔以預設數(shù)值為單位降低或增加所述遮罩層的透明度。優(yōu)選的，所述設置模塊用于在所述圖片顯示區(qū)域的正上方設置遮罩層，所述遮罩層與所述圖片顯示區(qū)域大小一致。
上述在網(wǎng)絡瀏覽器上實現(xiàn)圖片漸進漸出效果的方法和裝置，通過在圖片顯示區(qū)域上方設置遮罩層，顯示圖片時圖片直接設置為可見，通過調(diào)整遮罩層的透明度來實現(xiàn)圖片漸進漸出效果，不需要調(diào)整圖片的透明度屬性，因此不會損壞圖片，改善了圖片的顯示效果O

圖I為一個實施例中在網(wǎng)絡瀏覽器上實現(xiàn)圖片漸進漸出效果的方法的流程圖；圖2為一個實施例中設置遮罩層的示意圖；圖3為另一個實施例中在網(wǎng)絡瀏覽器上實現(xiàn)圖片漸進漸出效果的方法的流程圖；圖4為一個實施例中在網(wǎng)絡瀏覽器上實現(xiàn)圖片漸進漸出效果的裝置的結構示意圖；圖5為另一個實施例中在網(wǎng)絡瀏覽器上實現(xiàn)圖片漸進漸出效果的裝置的結構示意圖。
具體實施方式如圖I所示，在一個實施例中，一種在網(wǎng)絡瀏覽器上實現(xiàn)圖片漸進漸出效果的方法，包括以下步驟步驟S102，在圖片顯示區(qū)域上方設置遮罩層。如圖2所示，遮罩層是垂直于顯示圖片的顯示器坐標方向，在圖片顯示區(qū)域上方，以指定顏色(通常為黑色或者灰色)為背景的網(wǎng)頁容器元素。優(yōu)選的，遮罩層設置在圖片顯示區(qū)域的正上方，并且與圖片顯示區(qū)域的大小一致。這樣，調(diào)整遮罩層的透明度時，圖片顯示的透明度也會相應變化，設置遮罩層與圖片顯示區(qū)域大小一致，可以避免調(diào)整遮罩層的透明度時，不會影響到圖片顯示區(qū)域之外的網(wǎng)頁元素。步驟S104，加載當前需顯示的圖片，將該圖片設置為可見。將當前需顯示的圖片加載到圖片顯示區(qū)域，并將圖片設置為可見。步驟S106，按照設定的時間間隔調(diào)整遮罩層的透明度。調(diào)整遮罩層的透明度時，圖片顯示的透明度會隨著遮罩層的透明度變化而變化，從而實現(xiàn)圖片漸進漸出效果。由于不需要直接調(diào)整圖片的透明度屬性，因此不會對圖片造成損壞，改善了圖片顯示效果。
如圖3所示，在另一個實施例中，一種在網(wǎng)絡瀏覽器上實現(xiàn)圖片漸進漸出效果的方法，包括以下步驟步驟S202，在圖片顯示區(qū)域上方設置遮罩層。如圖2所示，在一個優(yōu)選的實施例中，遮罩層設置在圖片顯示區(qū)域的正上方，并且與圖片顯示區(qū)域的大小一致。步驟S204，加載當前需顯示的圖片，將該圖片設置為可見。打開網(wǎng)頁時，通常在圖片顯示區(qū)域需要顯示多張圖片，該實施例中，僅加載當前需顯示的圖片，而其他接著要顯示的圖片可以在當前需顯示的圖片顯示完后再去加載 。這樣，按照需要加載圖片，在網(wǎng)頁打開時能夠減少網(wǎng)絡數(shù)據(jù)傳輸，縮短網(wǎng)頁打開時間。此外，一些網(wǎng)頁打開后在較短的時間內(nèi)就被關閉，若將所有需要在圖片顯示區(qū)域顯示的圖片都加載下來，往往一些加載下來的圖片并沒有使用到，因此，按照需要加載圖片，也可以減少不必要的網(wǎng)絡數(shù)據(jù)傳輸。加載當前需顯示的圖片，是將圖片輸出到網(wǎng)頁指定區(qū)域(即圖片顯示區(qū)域)對應的HTML(Hyper Text Mark-up Language,超文本標記語言)代碼中。在加載完當前需顯示的圖片時，將該圖片設置為可見。在其他實施方式中，也可以加載需要在圖片顯示區(qū)域顯示的多張圖片，若加載的是多張圖片，則將當前需顯示的圖片設置為可見，將其它圖片進行隱藏。步驟S206，按照設定的時間間隔調(diào)整遮罩層的透明度。在步驟S206中，按照設定的時間間隔以預設數(shù)值為單位降低或增加遮罩層的透明度。例如，每2秒降低遮罩層10%的透明度。當遮罩層的透明度降低時，則圖片顯示的透明度增加，即圖片會逐漸的顯示出來。步驟S208，判斷是否還有下一張需顯示的圖片，若是，則進入步驟S210，否則結束。若還有下一張需顯示的圖片，則繼續(xù)顯示。步驟S210，隱藏當前需顯示的圖片。若還需要顯示下一張需顯示的圖片，則將當前需顯示的圖片隱藏。這樣，若以后還需要顯示當前需顯示的圖片時，可以將該當前需顯示的圖片直接設置為可見，而不需要重新加載這張圖片，因此既能減少網(wǎng)絡數(shù)據(jù)傳輸，又提高了處理效率。步驟S212，加載下一張需顯示的圖片，將下一張需顯示的圖片設置為可見。步驟S214，按照設定的時間間隔調(diào)整所述遮罩層的透明度，返回步驟S208。如上所述，對于每一張需顯示的圖片，通過調(diào)整遮罩層的透明度即可實現(xiàn)該張圖片的漸進漸出效果，而不需要直接調(diào)整每張圖片的透明度屬性，因此不會對圖片造成損壞。調(diào)整完遮罩層的透明度后，返回到步驟S208繼續(xù)判斷是否還有下一張需顯示的圖片，若所有的圖片已經(jīng)顯示完或網(wǎng)頁關閉時，則流程結束。在另一個實施例中，顯示完所有的圖片后，判斷是否需要循環(huán)顯示圖片，若是，則繼續(xù)從第一張圖片開始顯示，即隱藏其他圖片(將其他圖片設置為不可見)，僅將第一張圖片設置為可見。由于圖片已經(jīng)加載完，因此不需要重新加載圖片，減少了網(wǎng)絡數(shù)據(jù)傳輸。當需要循環(huán)顯示圖片時，僅需要按照圖片的顯示順序?qū)斍靶枰@示的圖片設置為可見，將其他圖片設置為不可見，并在將當前需顯示的圖片設置為可見后，通過調(diào)整遮罩層的透明度來實現(xiàn)圖片的漸進漸出效果。
如圖4所示，在一個實施例中，一種在網(wǎng)絡瀏覽器上實現(xiàn)圖片漸進漸出效果的裝置，包括設置模塊102、加載模塊104和調(diào)整模塊106，其中設置模塊102用于在圖片顯示區(qū)域上方設置遮罩層。如圖2所示，遮罩層是垂直于顯示圖片的顯示器坐標方向，在圖片顯示區(qū)域上方，以指定顏色(通常為黑色或者灰色)為背景的網(wǎng)頁容器元素。優(yōu)選的，設置模塊102將遮罩層設置在圖片顯示區(qū)域的正上方，并且與圖片顯示區(qū)域的大小一致。這樣，調(diào)整遮罩層的透明度時，圖片顯示的透明度也會相應變化，設置遮罩層與圖片顯示區(qū)域大小一致，可以避免調(diào)整遮罩層的透明度時，不會影響到圖片顯示區(qū)域之外的網(wǎng)頁元素。加載模塊104用于加載當前需顯示的圖片，并將該當前需顯示的圖片設置為可見。調(diào)整模塊106用于按照設定的時間間隔調(diào)整遮罩層的透明度。 由于當前需顯示的圖片設置為可見，調(diào)整模塊106在調(diào)整遮罩層的透明度時，圖片顯示的透明度會隨著遮罩層的透明度變化而變化，從而實現(xiàn)圖片漸進漸出效果。由于不需要直接調(diào)整圖片的透明度屬性，因此不會對圖片造成損壞，改善了圖片顯示效果。如圖5所示，在另一個實施例中，一種在網(wǎng)絡瀏覽器上實現(xiàn)圖片漸進漸出效果的裝置，除了包括上述設置模塊102、加載模塊104和調(diào)整模塊106外，還包括判斷模塊108，其中判斷模塊108用于判斷是否還有下一張需顯示的圖片。該實施例中，調(diào)整模塊106還用于當還有下一張需顯示的圖片時，隱藏所述當前需顯示的圖片；加載模塊104還用于當還有下一張需顯示的圖片時，加載所述下一張需顯示的圖片，并將所述下一張需顯示的圖片設置為可見，以及通知調(diào)整模塊106按照設定的時間間隔調(diào)整遮罩層的透明度。加載模塊104在還有下一張需顯示圖片時，繼續(xù)加載下一張需顯示的圖片。也就是說，加載模塊104僅加載當前需要顯示的圖片，而其他接著要顯示的圖片可以在當前需顯示的圖片顯示完后再去加載。這樣按照需要加載圖片，在網(wǎng)頁打開時能夠減少網(wǎng)絡數(shù)據(jù)傳輸，縮短網(wǎng)頁打開時間。此外，一些網(wǎng)頁打開后可能在較短的時間內(nèi)就被關閉，若將所有需要在圖片顯示區(qū)域顯示的圖片都加載下來，往往一些加載下來的圖片并沒有使用到，因此，按照需要加載圖片，也可以減少不必要的網(wǎng)絡數(shù)據(jù)傳輸。加載模塊104加載當前需顯示的圖片，是將圖片輸出到網(wǎng)頁指定區(qū)域(即圖片顯示區(qū)域)對應的HTML (Hyper Text Mark-up Language,超文本標記語言)代碼中。在加載完當前需顯示的圖片時，將該圖片設置為可見。該實施例中，若還有下一張需顯示的圖片，則調(diào)整模塊106將當前需顯示的圖片隱藏，這樣，若以后還需要顯示當前需顯示的圖片時，可以將該當前需顯示的圖片直接設置為可見，而不需要重新加載這張圖片，因此既能減少網(wǎng)絡數(shù)據(jù)傳輸，又提高了處理效率。對于每一張需顯示的圖片，通過調(diào)整遮罩層的透明度即可實現(xiàn)該張圖片的漸進漸出效果，而不需要直接調(diào)整每張圖片的透明度屬性，因此不會對圖片造成損壞。調(diào)整完遮罩層的透明度從而實現(xiàn)了當前圖片的漸進漸出效果后，判斷模塊108會繼續(xù)判斷是否還有下一張需顯示的圖片，直到所有的圖片已顯示完或網(wǎng)頁關閉。在另一個實施例中，當所有圖片都顯示完后，判斷模塊108可進一步判斷是否還需要循環(huán)顯示圖片，若是，則調(diào)整模塊106隱藏當前顯示的圖片，將第一張圖片設置為可見，然后調(diào)整模塊106繼續(xù)調(diào)整遮罩層的透明度來實現(xiàn)圖片的漸進漸出效果。也就是說，當需要循環(huán)顯示圖片時，僅需要按照圖片的顯示順序?qū)斍靶枰@示的圖片設置為可見，將其他圖片設置為不可見，并在將當前需顯示的圖片設置為可見后，通過調(diào)整遮罩層的透明度來實現(xiàn)圖片的漸進漸出效果。由于需要顯示的所有圖片都已經(jīng)加載完，循環(huán)顯示圖片時不需要重新加載圖片，減少了網(wǎng)絡數(shù)據(jù)傳輸。應該說明的是，上述在網(wǎng)絡瀏覽器實現(xiàn)圖片漸進漸出效果的方法和系統(tǒng)并不局限于網(wǎng)絡瀏覽器的類型，在多類網(wǎng)絡瀏覽器上都可以實現(xiàn)圖片漸進漸出效果。以上所述實施例僅表達了本發(fā)明的幾種實施方式，其描述較為具體和詳細，但并不能因此而理解為對本發(fā)明專利范圍的限制。應當指出的是，對于本領域的普通技術人員來說，在不脫離本發(fā)明構思的前提下，還可以做出若干變形和改進，這些都屬于本發(fā)明的保 護范圍。因此，本發(fā)明專利的保護范圍應以所附權利要求為準。
權利要求
1.一種在網(wǎng)絡瀏覽器上實現(xiàn)圖片漸進漸出效果的方法，包括以下步驟 在圖片顯示區(qū)域上方設置遮罩層； 加載當前需顯示的圖片，將所述圖片設置為可見； 按照設定的時間間隔調(diào)整所述遮罩層的透明度。
2.根據(jù)權利要求I所述的在網(wǎng)絡瀏覽器上實現(xiàn)圖片漸進漸出效果的方法，其特征在于，在所述按照設定的時間間隔調(diào)整所述遮罩層的透明度的步驟之后還包括 判斷是否還有下一張需顯示的圖片，若是，則 隱藏所述當前需顯示的圖片； 加載所述下一張需顯示的圖片，將所述下ー張需顯示的圖片設置為可見； 按照設定的時間間隔調(diào)整所述遮罩層的透明度。
3.根據(jù)權利要求I所述的在網(wǎng)絡瀏覽器上實現(xiàn)圖片漸進漸出效果的方法，其特征在于，所述按照設定的時間間隔調(diào)整所述遮罩層的透明度的步驟為 按照設定的時間間隔以預設數(shù)值為單位降低或増加所述遮罩層的透明度。
4.根據(jù)權利要求I至3中任意一項所述的在網(wǎng)絡瀏覽器上實現(xiàn)圖片漸進漸出效果的方法，其特征在于，所述遮罩層設置在所述圖片顯示區(qū)域的正上方，并與所述圖片顯示區(qū)域大小一致。
5.一種在網(wǎng)絡瀏覽器上實現(xiàn)圖片漸進漸出效果的裝置，其特征在于，包括 設置模塊，用于在圖片顯示區(qū)域上方設置遮罩層； 加載模塊，用于加載當前需顯示的圖片，并將所述圖片設置為可見； 調(diào)整模塊，用于按照設定的時間間隔調(diào)整所述遮罩層的透明度。
6.ー種根據(jù)權利要求5所述的在網(wǎng)絡瀏覽器上實現(xiàn)圖片漸進漸出效果的裝置，其特征在于，還包括 判斷模塊，用于判斷是否還有下一張需顯示的圖片； 所述調(diào)整模塊還用于當還有下一張需顯示的圖片吋，隱藏所述當前需顯示的圖片； 所述加載模塊還用于當還有下一張需顯示的圖片時，加載所述下一張需顯示的圖片，并將所述下ー張需顯示的圖片設置為可見，以及通知所述調(diào)整模塊按照設定的時間間隔調(diào)整所述遮罩層的透明度。
7.根據(jù)權利要求5所述的在網(wǎng)絡瀏覽器上實現(xiàn)圖片漸進漸出效果的裝置，其特征在于，所述調(diào)整模塊用于按照設定的時間間隔以預設數(shù)值為單位降低或増加所述遮罩層的透明度。
8.根據(jù)權利要求6至7中任意一項所述的網(wǎng)絡瀏覽器上實現(xiàn)圖片漸進漸出效果的裝置，其特征在于，所述設置模塊用于在所述圖片顯示區(qū)域的正上方設置遮罩層，所述遮罩層與所述圖片顯示區(qū)域大小一致。
全文摘要
一種在網(wǎng)絡瀏覽器上實現(xiàn)圖片漸進漸出效果的方法，包括以下步驟在圖片顯示區(qū)域上方設置遮罩層；加載當前需顯示的圖片，將所述圖片設置為可見；按照設定的時間間隔調(diào)整所述遮罩層的透明度。該方法通過調(diào)整遮罩層的透明度實現(xiàn)圖片的漸進漸出效果，不會對圖片造成損壞，有效改善了圖片顯示效果。此外，還提供了一種在網(wǎng)絡瀏覽器上實現(xiàn)圖片漸進漸出效果的裝置。
文檔編號G06F17/30GK102779129SQ201110121358
公開日2012年11月14日 申請日期2011年5月11日 優(yōu)先權日2011年5月11日
發(fā)明者唐爽 申請人:騰訊科技(深圳)有限公司