TWI493498B - 依據可視區域在網頁中顯示圖片之系統及其方法 - Google Patents

Description

依據可視區域在網頁中顯示圖片之系統及其方法

一種網頁圖片顯示系統及其方法，特別係指一種依據可視區域在網頁中顯示圖片之系統及其方法。

在瀏覽器中，網頁中的超文本標記語言(HyperText Markup Language,HTML)之語法與圖片的載入是非同步執行的，當瀏覽器載入HTML語法後，若所載入的HTML語法中包含用來顯示圖片的標籤，則瀏覽器會先在網頁中使用替代圖示表示該圖片，之後，瀏覽器才會開始載入圖片，並在圖片載入完成後才會將載入完成的圖片取代替代圖示在網頁中顯示。

在部分的網頁中，網頁的開發者可能沒有在用來顯示圖片的標籤中寫下被顯示之圖片的寬與高，若圖片的尺寸大於替代圖示的尺寸，則在瀏覽器完成圖片的載入並在網頁中顯示時，在圖片下方的網頁內容將會強制向下位移。若在瀏覽器載入圖片前，使用者已經將網頁捲動到未顯示的圖片下方進行瀏覽，當圖片載入完成並在網頁中顯示時，由於圖片下方的網頁內容會向下位移，這造成使用者正在瀏覽的網頁內容會向下位移，若使用者希望繼續瀏覽先前所瀏覽的網頁內容，則使用者需要將網頁捲動到先前所瀏覽的網頁內容才能繼續瀏覽。

一旦使用者所瀏覽之網頁內容上方包含數張圖片時，在每一張圖片載入完成後，使用者所瀏覽之網頁內容向下位移的情況會持續發生，直至使用者所瀏覽之網頁內容上方的所有圖片都載入完成並在網頁中顯示為止，這明顯造成使用者在瀏覽網頁時的困擾。

綜上所述，可知先前技術中長期以來一直存在網頁中的圖片 被顯示時，圖片下方之網頁內容會向下位移的問題，因此有必要提出改進的技術手段，來解決此一問題。

有鑒於先前技術存在使用者所瀏覽之網頁內容會在上方圖片在網頁中被顯示時向下位移的問題，本發明遂揭露一種依據可視區域在網頁中顯示圖片之系統及其方法，其中：

本發明所揭露之依據可視區域在網頁中顯示圖片之系統，至少包含：物件搜尋模組，用以透過目標網頁之文件物件模型(Document Object Model,DOM)搜尋目標網頁中之所有圖片物件；屬性修改模組，用以修改圖片物件之屬性，使圖片物件在目標網頁中所呈現之替代圖片之尺寸與瀏覽器表示目標圖片所使用之替代物件相同；相對位置判斷模組，用以於圖片物件所對應之目標圖片載入完成時，判斷圖片物件所呈現之替代圖片與可視區域在目標網頁中之相對位置，屬性修改模組更用以於相對位置判斷模組判斷替代圖片位於可視區域中或位於可視區域下方時，還原呈現替代圖片之圖片物件之屬性，使目標圖片取代替代圖片呈現於目標網頁中。

本發明所揭露之依據可視區域在網頁中顯示圖片之方法，其步驟至少包括：透過目標網頁之文件物件模型搜尋目標網頁中之所有圖片物件；修改圖片物件之屬性，使圖片物件在目標網頁中呈現尺寸與瀏覽器表示目標圖片所使用之替代物件相同之替代圖片；當圖片物件所對應之目標圖片載入完成時，判斷圖片物件所呈現之替代圖片與可視區域在目標網頁中之相對位置；當替代圖片位於可視區域中或位於可視區域下方時，還原呈現替代圖片之圖片物件之屬性，使目標圖片取代替代圖片呈現於目標網頁中。

本發明所揭露之系統與方法如上，與先前技術之間的差異在於本發明透過修改目標網頁中之圖片物件的屬性，使圖片物件在目標網頁中呈現尺寸與瀏覽器表示目標圖片所使用之替代物件相同之替代圖片後，判斷與載入完成之目標圖片對應的替代圖片位於可視區域之中或位於可視 區域之下方時，還原與載入完成之目標圖片對應的圖片物件之屬性，使目標圖片取代替代圖片呈現於目標網頁中，藉以解決先前技術所存在的問題，並可以達成避免影響使用者瀏覽網頁內容的技術功效。

110‧‧‧物件搜尋模組

130‧‧‧相對位置判斷模組

150‧‧‧屬性修改模組

190‧‧‧物件建立模組

310‧‧‧目標網頁

311a、312a‧‧‧替代圖片

311b、312b‧‧‧目標圖片

313、314‧‧‧目標圖片

320‧‧‧可視區域

步驟210‧‧‧透過目標網頁之文件物件模型搜尋目標網頁中之所有圖片物件

步驟220‧‧‧修改圖片物件之屬性，使圖片物件在目標網頁中呈現尺寸與瀏覽器表示目標圖片所使用之替代物件相同之替代圖片

步驟230‧‧‧於目標網頁中建立圖片來源路徑為目標圖片之下載路徑之暫時圖片物件，藉以下載目標圖片

步驟240‧‧‧圖片物件所對應之目標圖片是否載入完成

步驟251‧‧‧判斷圖片物件所呈現之替代圖片與目標網頁之可視區域的相對位置

步驟255‧‧‧判斷替代圖片是否位於可視區域上方

步驟260‧‧‧還原呈現替代圖片之圖片物件之屬性，使目標圖片取代替代圖片呈現於目標網頁中

步驟270‧‧‧可視區域是否發生變化

第1圖為本發明所提之依據可視區域在網頁中顯示圖片之系統架構圖。

第2圖為本發明所提之依據可視區域在網頁中顯示圖片之方法流程圖。

第3A圖與第3B圖為本發明實施例所提之依據可視區域在目標網頁中顯示目標圖片之示意圖。

以下將配合圖式及實施例來詳細說明本發明之特徵與實施方式，內容足以使任何熟習相關技藝者能夠輕易地充分理解本發明解決技術問題所應用的技術手段並據以實施，藉此實現本發明可達成的功效。

本發明可以在瀏覽器顯示目標網頁之網頁內容時，先以替代圖片取代相對應之目標圖片在目標網頁中呈現，並依據目標網頁的可視區域與替代圖片在目標網頁中的相對位置，判斷是否將替代圖片還原為相對應的目標圖片在目標網頁中呈現。一般而言，本發明包含在可嵌入目標網頁的腳本(Script)中，但本發明並不以此為限。

在本發明中，替代圖片被用來暫時取代相對應的目標圖片在目標網頁上呈現，替代圖片在目標網頁中的位置會與相對應的目標圖片在目標網頁中的位置相同。另外，替代圖片的尺寸大小會與瀏覽器表示目標圖片所使用的替代物件的尺寸大小相同。其中，瀏覽器所使用之替代物件是在目標圖片未被瀏覽器載入前，用來在目標網頁中表示未被載入之目標圖片的圖像(icon)等物件。

以下先以「第1圖」本發明所提之依據可視區域在網頁中顯 示圖片之系統架構圖來說明本發明的系統運作。如「第1圖」所示，本發明之系統含有物件搜尋模組110、相對位置判斷模組130、以及屬性修改模組150。

物件搜尋模組110負責搜尋目標網頁中的所有圖片物件(image object)。一般而言，物件搜尋模組110可以透過目標網頁中的文件物件模型(Document Object Model,DOM)取得目標網頁中的所有物件，並依據所取得之物件的屬性(property)判斷所取得的物件是否為圖片物件。

目標網頁中的每一個圖片物件都可以對應到一張圖片，在本發明中，與圖片物件對應的圖片被稱為「目標圖片」。其中，目標圖片可以被瀏覽器顯示在目標網頁的網頁內容中。

相對位置判斷模組130負責在瀏覽器完成目標圖片的載入時，判斷與載入完成之目標圖片相對應的替代圖片與目標網頁之可視區域的相對位置。其中，相對位置判斷模組130可以透過圖片物件在目標圖片完成載入時所產生之載入完成的網頁事件(onComplete event)判斷出目標圖片已經完成載入，但相對位置判斷模組130判斷目標圖片完成載入之方式並不以此為限。

相對位置判斷模組130也負責在目標網頁的可視區域發生變化時，判斷載入完成之目標圖片與目標網頁之可視區域的相對位置。其中，相對位置判斷模組130可以監聽瀏覽器的操作事件，並在監聽到可以讓目標網頁的可視區域發生變化事件時，如監聽到畫面捲動事件、畫面放大事件等，判斷目標網頁的可視區域發生變化，但相對位置判斷模組130判斷目標網頁的可視區域發生變化之方式並不以此為限，例如，相對位置判斷模組130也可以透過持續獲取當前目標網頁之可視區域的可視位置資訊，並與前一次所獲取到之可視位置資訊進行比對，當兩者不同時，表示目標網頁的可視區域發生變化。其中，被相對位置判斷模組130所獲取之可視位置資訊可以表示目標網頁之可視區域在目標網頁上的位置，例如，目標網頁上的座標點，但本發明所提之可視位置資訊並不以此為限。

相對位置判斷模組130可以獲取與目標圖片對應之替代圖片在目標網頁上的圖片位置資訊。由於替代圖片在目標網頁上的位置與目 標圖片相同，因此，相對位置判斷模組130可以透過與載入完成之目標圖片對應之圖片物件的屬性獲取圖片位置資訊。被相對位置判斷模組130所獲取之圖片位置資訊可以表示圖片物件在目標網頁上的位置，例如，目標網頁上的座標點，但本發明所提之圖片位置資訊並不以此為限。

同時，相對位置判斷模組130也可以透過目標網頁上之window物件的屬性獲取目標網頁之可視區域的可視位置資訊，並依據所獲取到之圖片位置資訊以及可視位置資訊判斷與載入完成之目標圖片對應的替代圖片是在目標網頁之可視區域中，或是在可視區域上方或下方。

屬性修改模組150負責修改物件搜尋模組110所搜尋到之圖片物件的一個或多個屬性，使瀏覽器依據屬性被修改後之圖片物件在目標網頁中所呈現之替代圖片的尺寸大小為與瀏覽器在目標網頁中表示未完成下載之目標圖片所使用之替代物件的尺寸大小相同。在部分的實施例中，屬性修改模組150可以先判斷圖片物件之圖片長度的屬性是否被設定，屬性修改模組150可以在圖片物件之圖片長度的屬性沒有被設定時才修改圖片物件的屬性。

屬性修改模組150可以將圖片物件之圖片來源路徑的屬性中的資料修改為替代圖片的下載路徑，使得瀏覽器依據圖片物件在目標網頁中所呈現的圖片是尺寸大小與瀏覽器所使用之替代圖片相同的替代圖片而非目標圖片；屬性修改模組150也可以將圖片物件之圖片長度與圖片寬度的屬性修改為與瀏覽器所使用之替代物件的長與寬相同。

屬性修改模組150也負責在相對位置判斷模組130判斷與載入完成之目標圖片對應的替代圖片位於可視區域中或位於可視區域下方時，也就是判斷載入完成之目標圖片不位於可視區域上方時，若屬性修改模組150先前是將與載入完成之目標圖片對應的圖片物件之圖片來源路徑的屬性所儲存之資料修改為替代圖片的下載位址，則屬性修改模組150會將與載入完成之目標圖片對應的圖片物件之圖片來源路徑的屬性由替代圖片的下載位址還原為目標圖片的下載位址，使目標圖片取代替代圖片，被瀏覽器完整呈現於目標網頁中；而若屬性修改模組150是對圖片物件之圖片高度與圖片寬度之屬性進行修改，則屬性修改模組150會將圖片物件之 圖片高度與圖片寬度的屬性中的資料還原。

此外，本發明更可以包含可附加的物件建立模組190，物件建立模組190可以在屬性修改模組150將圖片物件之圖片來源路徑的屬性中的資料修改為替代圖片的下載路徑時，在目標網頁中增加一個臨時圖片物件，該臨時圖片物件之圖片來源路徑的屬性即為被修改之目標圖片的下載路徑，藉以讓瀏覽器依據目標圖片的下載路徑下載目標圖片。

物件建立模組190也可以在屬性修改模組150將圖片物件之圖片來源路徑的屬性中的資料由替代圖片的下載路徑還原為原先之目標圖片的下載路徑時，將先前在目標網頁中所建立的臨時圖片物件刪除。

接著以一個實施例來解說本發明的運作系統與方法，並請參照「第2圖」本發明所提之依據可視區域在網頁中顯示圖片之方法流程圖。在本實施例中，假設目標網頁並未包含本發明，而是由瀏覽器本身或瀏覽器之外掛程式將包含本發明之腳本嵌入目標網頁中，但本發明並不以此為限，目標網頁的開發者也可以在開發目標網頁時，將包含本發明之腳本寫入目標網頁中。

當使用者使用瀏覽器瀏覽目標網頁時，瀏覽器會下載目標網頁後，在瀏覽器下載目標網頁的過程中，則物件搜尋模組110可以搜尋目標網頁中的所有圖片物件(步驟210)。在本實施例中，假設物件搜尋模組110會在瀏覽器完成目標網頁之下載，且瀏覽器完成文件物件模型的初始化後，透過文件物件模型搜尋目標網頁中的所有圖片物件。

在物件搜尋模組110搜尋出目標網頁中的所有圖片物件(步驟210)後，屬性修改模組150可以修改物件搜尋模組110所搜尋出之圖片物件的屬性，使圖片物件在目標網頁中呈現尺寸與覽器表示目標圖片所使用之替代物件相同的替代圖片(步驟220)。在本實施例中，假設屬性修改模組150會修改圖片物件之圖片來源位址的屬性，將圖片物件之圖片來源位址由目標圖片的下載位址修改為替代圖片的下載位址。

在屬性修改模組150修改圖片物件的屬性後，若目標網頁中並沒有包含預先下載目標網頁中之所有圖片的腳本，則本實施例所提之被嵌入目標網頁中的腳本便需要包含物件建立模組190，物件建立模組190可 以在目標網頁中建立圖片來源路徑之屬性為目標圖片之下載路徑的暫時圖片物件，藉以讓瀏覽器下載目標圖片(步驟230)。

而若目標網頁中原本即已經包含預先下載目標網頁中之所有圖片的腳本，或是在物件建立模組190在目標網頁中建立暫時圖片物件後，相對位置判斷模組130可以判斷與目標網頁中的各個圖片物件對應之目標圖片是否已經載入完成(步驟240)。在本實施例中，假設相對位置判斷模組130會判斷被下載的目標圖片是否產生onComplete的網頁事件，當表示目標圖片完成載入的onComplete網頁事件被產生時，相對位置判斷模組130即可以判斷出有目標圖片完成載入。

若沒有目標圖片完成載入之網頁事件被產生，則相對位置判斷模組130可以持續等待目標圖片完成載入之網頁事件被產生，而若有目標圖片完成載入之網頁事件被產生，則相對位置判斷模組130可以判斷與載入完成之目標圖片對應的替代圖片與目標網頁之可視區域在目標網頁中之相對位置(步驟251)。在本實施例中，相對位置判斷模組130會透過在目標網頁上呈現替代圖片之圖片物件的offsetTop屬性取得替代圖片與目標網頁之頂端的距離(圖片位置資訊)，也會透過window物件的pageYOffset屬性取得目標網頁的可視區域與目標網頁之頂端的距離(可視位置資訊)，並依據替代圖片與目標網頁之頂端的距離與目標網頁的可視區域與目標網頁之頂端的距離判斷載入完成之目標圖片在目標網頁的可視區域中，或是在目標網頁之可視區域的上方或下方。

在相對位置判斷模組130判斷出與載入完成之目標圖片對應的替代圖片與目標網頁之可視區域在目標網頁中之相對位置(步驟251)後，相對位置判斷模組130可以進一步判斷載入替代圖片是否在可視區域的上方(步驟255)，若否，也就是與載入完成之目標圖片對應的替代圖片在可視區域之中或是在可視區域的下方，則屬性修改模組150可以將呈現替代圖片的圖片物件之圖片來源位址的屬性還原回目標圖片的下載位置，使得目標圖片取代替代圖片被瀏覽器顯示於目標網頁中(步驟260)。如「第3A圖」之目標圖片313與目標圖片314所示，其中，目標圖片313在可視區域320之中，目標圖片314在可視區域320的下方。

而若載入完成之目標圖片在可視區域的上方，則屬性修改模組150不會被將呈現替代圖片的圖片物件之圖片來源位址的屬性還原回原先目標圖片的下載位置，如「第3A圖」之替代圖片311a與替代圖片312a所示。

同時，若載入完成之目標圖片在可視區域的上方，則相對位置判斷模組130也可以進一步判斷目標網頁的可視區域是否發生變化(步驟270)。在本實施例中，假設相對位置判斷模組130會監聽瀏覽器的操作事件，並在監聽到畫面捲動事件時，判斷目標網頁的可視區域發生變化。

若相對位置判斷模組130判斷目標網頁的可視區域沒有發生變化，則相對位置判斷模組130可以持續等待目標網頁的可視區域發生變化，而若相對位置判斷模組130判斷目標網頁的可視區域發生變化，如「第3B圖」所示，目標網頁310被向上捲動，因此目標網頁的可視區域320也會向上移動，則相對位置判斷模組130可以再次判斷與載入完成之目標圖片對應的替代圖片與目標網頁之可視區域在目標網頁中的相對位置(步驟251)，判斷與載入完成之目標圖片對應的替代圖片是否在可視區域的上方(步驟255)，若否，則屬性修改模組150可以將呈現替代圖片的圖片物件之圖片來源位址的屬性還原回目標圖片的下載位置，使得目標圖片取代替代圖片被瀏覽器顯示於目標網頁中(步驟260)，如目標圖片312b取代了替代圖片312a。而若與載入完成之目標圖片對應的替代圖片依然在可視區域的上方，則相對位置判斷模組130可以繼續判斷目標網頁的可視區域是否發生變化(步驟270)，屬性修改模組150依然不會將呈現替代圖片的圖片物件之圖片來源位址的屬性還原回目標圖片的下載位置，如替代圖片311a所示。

綜上所述，可知本發明與先前技術之間的差異在於具有修改目標網頁中之圖片物件的屬性，使圖片物件在目標網頁中呈現尺寸與瀏覽器表示目標圖片所使用之替代物件相同之替代圖片後，判斷與載入完成之目標圖片對應的替代圖片位於可視區域之中或位於可視區域之下方時，還原與載入完成之目標圖片對應的圖片物件之屬性，使目標圖片取代替代圖片呈現於目標網頁中之技術手段，藉由此一技術手段可以解決先前技術所 存在使用者所瀏覽之網頁內容會在上方圖片在網頁中被顯示時向下位移的問題，進而達成避免影響使用者瀏覽網頁內容的技術功效。

再者，本發明之依據可視區域在網頁中顯示圖片之方法，可實現於硬體、軟體或硬體與軟體之組合中，亦可在電腦系統中以集中方式實現或以不同元件散佈於若干互連之電腦系統的分散方式實現。

雖然本發明所揭露之實施方式如上，惟所述之內容並非用以直接限定本發明之專利保護範圍。任何本發明所屬技術領域中具有通常知識者，在不脫離本發明所揭露之精神和範圍的前提下，對本發明之實施的形式上及細節上作些許之更動潤飾，均屬於本發明之專利保護範圍。本發明之專利保護範圍，仍須以所附之申請專利範圍所界定者為準。

步驟210‧‧‧透過目標網頁之文件物件模型搜尋目標網頁中之所有圖片物件

步驟220‧‧‧修改圖片物件之屬性，使圖片物件在目標網頁中呈現尺寸與瀏覽器表示目標圖片所使用之替代物件相同之替代圖片

步驟230‧‧‧於目標網頁中建立圖片來源路徑為目標圖片之下載路徑之暫時圖片物件，藉以下載目標圖片

步驟240‧‧‧圖片物件所對應之目標圖片是否載入完成

步驟251‧‧‧判斷圖片物件所呈現之替代圖片與目標網頁之可視區域的相對位置

步驟255‧‧‧判斷替代圖片是否位於可視區域上方

步驟260‧‧‧還原呈現替代圖片之圖片物件之屬性，使目標圖片取代替代圖片呈現於目標網頁中

步驟270‧‧‧可視區域是否發生變化

Claims (10)

1. 一種依據可視區域在網頁中顯示圖片之方法，應用於一瀏覽器顯示一目標網頁時，該方法至少包含下列步驟：透過該目標網頁之一文件物件模型(Document Object Model,DOM)搜尋該目標網頁中之所有圖片物件；修改一該圖片物件之至少一屬性，使該圖片物件在該目標網頁中呈現尺寸與該瀏覽器表示該些目標圖片所使用之一替代物件相同之一替代圖片；當該圖片物件所對應之一目標圖片載入完成時，判斷該圖片物件所呈現之該替代圖片與一可視區域在該目標網頁中之相對位置；及當該替代圖片位於該可視區域中或位於該可視區域下方時，還原呈現該替代圖片之該圖片物件之屬性，使該目標圖片取代該替代圖片呈現於該目標網頁中。
2. 如申請專利範圍第1項所述之依據可視區域在網頁中顯示圖片之方法，其中該方法於判斷該圖片物件所呈現之該替代圖片與該可視區域在該目標網頁中之相對位置之步驟後，更包含於該可視區域發生變化時，再次判斷該圖片物件所呈現之該替代圖片與該可視區域在該目標網頁中之相對位置，並於該替代圖片位於該可視區域中或位於該可視區域下方時，還原呈現該替代圖片之該圖片物件之屬性，使該目標圖片取代該替代圖片呈現於該目標網頁中之步驟。
3. 如申請專利範圍第1項所述之依據可視區域在網頁中顯示圖片之方法，其中判斷該圖片物件所呈現之該替代圖片與該可視區域在該目標網頁中之相對位置之步驟為獲取該替代圖片在該目標網頁中之一圖片位置資訊及該可視區域在該目標網頁中之一可視位置資訊，並依據該 圖片位置資訊及該可視位置資訊判斷該替代圖片與該可視區域的相對位置。
4. 如申請專利範圍第1項所述之依據可視區域在網頁中顯示圖片之方法，其中修改該圖片物件之至少一屬性之步驟為修改該圖片物件之圖片來源路徑或修改該圖片物件之圖片長度與圖片寬度。
5. 如申請專利範圍第4項所述之依據可視區域在網頁中顯示圖片之方法，其中該方法於修改該圖片物件之圖片來源路徑之步驟後，更包含於該目標網頁中建立圖片來源路徑為該目標圖片之下載路徑之一暫時圖片物件，藉以下載該目標圖片之步驟。
6. 一種依據可視區域在網頁中顯示圖片之系統，應用於一瀏覽器顯示一目標網頁時，該系統至少包含：一物件搜尋模組，用以透過該目標網頁之一文件物件模型搜尋該目標網頁中之所有圖片物件；一屬性修改模組，用以修改一該圖片物件之至少一屬性，使該圖片物件在該目標網頁中所呈現之一替代圖片之尺寸與該瀏覽器表示該些目標圖片所使用之一替代物件相同；及一相對位置判斷模組，用以於該圖片物件所對應之一目標圖片載入完成時，判斷該圖片物件所呈現之該替代圖片與一可視區域在該目標網頁中之相對位置，該屬性修改模組更用以於該相對位置判斷模組判斷該替代圖片位於該可視區域中或位於該可視區域下方時，還原呈現該替代圖片之圖片物件之屬性，使該目標圖片取代該替代圖片呈現於該目標網頁中。
7. 如申請專利範圍第6項所述之依據可視區域在網頁中顯示圖片之系統，其中該相對位置判斷模組該可視區域發生變化時，再次判斷該圖 片物件所呈現之該替代圖片與該可視區域在該目標網頁中之相對位置。
8. 如申請專利範圍第6項所述之依據可視區域在網頁中顯示圖片之系統，其中該相對位置判斷模組是獲取該替代圖片在該目標網頁中之一圖片位置資訊及該可視區域在該目標網頁中之一可視位置資訊，並依據該圖片位置資訊及該可視位置資訊判斷該替代圖片與該可視區域的相對位置。
9. 如申請專利範圍第6項所述之依據可視區域在網頁中顯示圖片之系統，其中該屬性修改模組是修改該圖片物件之圖片來源路徑或修改該圖片物件之圖片長度與圖片寬度。
10. 如申請專利範圍第9項所述之依據可視區域在網頁中顯示圖片之系統，其中該系統更包含一物件建立模組，用以於該目標網頁中建立圖片來源路徑為該目標圖片之下載路徑之一暫時圖片物件，藉以下載該目標圖片。