網(wǎng)頁(yè)多媒體內(nèi)容處理方法及裝置的制造方法
【技術(shù)領(lǐng)域】
[0001]本發(fā)明涉及互聯(lián)網(wǎng)技術(shù)領(lǐng)域，尤其涉及一種網(wǎng)頁(yè)多媒體內(nèi)容處理方法及裝置。
【背景技術(shù)】
[0002]隨著互聯(lián)網(wǎng)技術(shù)的不斷發(fā)展，網(wǎng)頁(yè)內(nèi)容也日益豐富起來。一般來說，網(wǎng)頁(yè)除包含文字內(nèi)容外，還包含例如圖片、音頻、視頻等多媒體內(nèi)容。與文字內(nèi)容相比，多媒體內(nèi)容更加生動(dòng)形象，對(duì)用戶更具有吸引力，能夠高效為用戶提供豐富的信息。
[0003]以圖片為例，過多的圖片會(huì)導(dǎo)致客戶端頁(yè)面加載速度降低，帶寬流量和內(nèi)存消耗增大，降低用戶體驗(yàn)。同時(shí)，還會(huì)給服務(wù)器造成過大壓力。為解決上述問題，目前常采用圖片懶加載的方式，即是當(dāng)用戶瀏覽到當(dāng)前區(qū)域時(shí)才加載區(qū)域內(nèi)的全部圖片。
[0004]然而，這種方式僅能夠通過對(duì)特定事件(如頁(yè)面滾動(dòng)事件)進(jìn)行響應(yīng)來觸發(fā)包括圖片、視頻、音頻等多媒體內(nèi)容的加載，具有觸發(fā)條件單一、容器非瀏覽器原生滾動(dòng)容器導(dǎo)致技術(shù)不通用、開發(fā)成本高、開發(fā)效率低等不足之處。

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

[0005]本發(fā)明實(shí)施例的目的在于，提供一種網(wǎng)頁(yè)多媒體內(nèi)容處理方法及裝置，以實(shí)現(xiàn)在用戶瀏覽網(wǎng)頁(yè)過程中，將瀏覽器視窗內(nèi)的多媒體內(nèi)容準(zhǔn)確、及時(shí)地加載到網(wǎng)頁(yè)中，使其具有通用性并提升用戶體驗(yàn)。
[0006]為實(shí)現(xiàn)上述發(fā)明目的，本發(fā)明的實(shí)施例提供了一種網(wǎng)頁(yè)多媒體內(nèi)容處理方法，包括:網(wǎng)頁(yè)內(nèi)容獲取步驟:獲取網(wǎng)頁(yè)內(nèi)容數(shù)據(jù)；多媒體網(wǎng)頁(yè)元素提取步驟:從所述網(wǎng)頁(yè)內(nèi)容數(shù)據(jù)提取與多媒體內(nèi)容相關(guān)的網(wǎng)頁(yè)元素的信息，并記錄提取到的所述網(wǎng)頁(yè)元素的信息；網(wǎng)頁(yè)內(nèi)容顯示步驟:加載頁(yè)面中除了所述多媒體內(nèi)容以外的網(wǎng)頁(yè)內(nèi)容，并且顯示加載的網(wǎng)頁(yè)內(nèi)容;多媒體內(nèi)容加載步驟:通過單獨(dú)的線程，從記錄的所述網(wǎng)頁(yè)元素的信息中獲取位于瀏覽器視窗內(nèi)的網(wǎng)頁(yè)元素的信息，并將位于瀏覽器視窗內(nèi)的所述網(wǎng)頁(yè)元素對(duì)應(yīng)的多媒體內(nèi)容加載到網(wǎng)頁(yè)中。
[0007]優(yōu)選地，所述多媒體網(wǎng)頁(yè)元素提取步驟的處理還包括:將所述網(wǎng)頁(yè)內(nèi)容數(shù)據(jù)當(dāng)中提取到的所述網(wǎng)頁(yè)元素的數(shù)據(jù)替換為指定的默認(rèn)信息。
[0008]優(yōu)選地，所述多媒體內(nèi)容加載步驟的處理包括:對(duì)所述記錄的所述網(wǎng)頁(yè)元素的信息中的任一網(wǎng)頁(yè)元素的信息，獲取所述網(wǎng)頁(yè)元素相對(duì)于瀏覽器視窗的位置數(shù)據(jù)，如果其位置當(dāng)前是處于在瀏覽器視窗中，則根據(jù)所述網(wǎng)頁(yè)元素的信息從網(wǎng)頁(yè)服務(wù)器獲取相應(yīng)的多媒體內(nèi)容數(shù)據(jù)，并且將所述網(wǎng)頁(yè)元素對(duì)應(yīng)的多媒體內(nèi)容加載到網(wǎng)頁(yè)中。
[0009]優(yōu)選地，所述網(wǎng)頁(yè)元素的信息包括所述多媒體內(nèi)容的下載地址或下載鏈接。
[0010]優(yōu)選地，所述方法還包括:從所述記錄的所述網(wǎng)頁(yè)元素的信息中移除已加載的網(wǎng)頁(yè)元素以及相應(yīng)的網(wǎng)頁(yè)元素的信息。
[0011]優(yōu)選地，以預(yù)定的時(shí)間間隔執(zhí)行所述多媒體內(nèi)容加載步驟的處理。
[0012]優(yōu)選地，所述指定的默認(rèn)信息是指定的文本信息、空白圖片或指定的圖片。
[0013]本發(fā)明的實(shí)施例還提供了一種網(wǎng)頁(yè)多媒體內(nèi)容處理裝置，包括:網(wǎng)頁(yè)內(nèi)容獲取模塊，用于獲取網(wǎng)頁(yè)內(nèi)容數(shù)據(jù);多媒體網(wǎng)頁(yè)元素提取模塊，用于從所述網(wǎng)頁(yè)內(nèi)容數(shù)據(jù)提取與多媒體內(nèi)容相關(guān)的網(wǎng)頁(yè)元素的信息，并記錄提取到的所述網(wǎng)頁(yè)元素的信息；網(wǎng)頁(yè)內(nèi)容顯示模塊，用于加載頁(yè)面中除了所述多媒體內(nèi)容以外的網(wǎng)頁(yè)內(nèi)容，并且顯示加載的網(wǎng)頁(yè)內(nèi)容;多媒體內(nèi)容加載模塊，用于通過單獨(dú)的線程，從記錄的所述網(wǎng)頁(yè)元素的信息中獲取位于瀏覽器視窗內(nèi)的網(wǎng)頁(yè)元素的信息，并將位于瀏覽器視窗內(nèi)的所述網(wǎng)頁(yè)元素對(duì)應(yīng)的多媒體內(nèi)容加載到網(wǎng)頁(yè)中。
[0014]優(yōu)選地，所述多媒體網(wǎng)頁(yè)元素提取模塊還用于將所述網(wǎng)頁(yè)內(nèi)容數(shù)據(jù)當(dāng)中提取到的所述網(wǎng)頁(yè)元素的數(shù)據(jù)替換為指定的默認(rèn)信息。
[0015]優(yōu)選地，所述多媒體內(nèi)容加載模塊用于對(duì)所述記錄的所述網(wǎng)頁(yè)元素的信息中的任一網(wǎng)頁(yè)元素的信息，獲取所述網(wǎng)頁(yè)元素相對(duì)于瀏覽器視窗的位置數(shù)據(jù)，如果其位置當(dāng)前是處于在瀏覽器視窗中，則根據(jù)所述網(wǎng)頁(yè)元素的信息從網(wǎng)頁(yè)服務(wù)器獲取相應(yīng)的多媒體內(nèi)容數(shù)據(jù)，并且將所述網(wǎng)頁(yè)元素對(duì)應(yīng)的多媒體內(nèi)容加載到網(wǎng)頁(yè)中。
[0016]優(yōu)選地，所述網(wǎng)頁(yè)元素的信息包括所述多媒體內(nèi)容的下載地址或下載鏈接。
[0017]優(yōu)選地，所述裝置還包括:網(wǎng)頁(yè)元素移除模塊，用于從所述記錄的所述網(wǎng)頁(yè)元素的信息中移除已加載的網(wǎng)頁(yè)元素以及相應(yīng)的網(wǎng)頁(yè)元素的信息。
[0018]優(yōu)選地，所述多媒體內(nèi)容加載模塊用于以預(yù)定的時(shí)間間隔執(zhí)行所述通過單獨(dú)的線程，從記錄的所述網(wǎng)頁(yè)元素的信息中獲取位于瀏覽器視窗內(nèi)的網(wǎng)頁(yè)元素的信息，并將位于瀏覽器視窗內(nèi)的所述網(wǎng)頁(yè)元素對(duì)應(yīng)的多媒體內(nèi)容加載到網(wǎng)頁(yè)中的處理。
[0019]優(yōu)選地，所述指定的默認(rèn)信息是指定的文本信息、空白圖片或指定的圖片。
[0020]本發(fā)明實(shí)施例提供的網(wǎng)頁(yè)多媒體內(nèi)容處理方法及裝置，在獲取網(wǎng)頁(yè)內(nèi)容數(shù)據(jù)后，進(jìn)一步從網(wǎng)頁(yè)內(nèi)容數(shù)據(jù)提取與多媒體內(nèi)容相關(guān)的網(wǎng)頁(yè)元素的信息，并記錄提取到的網(wǎng)頁(yè)元素的信息，通過單獨(dú)的線程，從記錄的網(wǎng)頁(yè)元素的信息中獲取位于瀏覽器視窗內(nèi)的網(wǎng)頁(yè)元素的信息，從而自動(dòng)、準(zhǔn)確地將所述網(wǎng)頁(yè)元素對(duì)應(yīng)的多媒體內(nèi)容加載到網(wǎng)頁(yè)中?？梢?，本實(shí)施例所述方法無需依賴于對(duì)某個(gè)或某些事件進(jìn)行響應(yīng)，或者特定的編程語(yǔ)言或架構(gòu)來觸發(fā)對(duì)多媒體內(nèi)容的加載，進(jìn)而使其具有通用性，并極大地提升了用戶體驗(yàn)。由此，提高了開發(fā)效率，降低了開發(fā)成本。
【附圖說明】
[0021]圖1是示出本發(fā)明實(shí)施例一的網(wǎng)頁(yè)多媒體內(nèi)容處理方法的流程圖；
[0022]圖2是示出本發(fā)明實(shí)施例二的網(wǎng)頁(yè)多媒體內(nèi)容處理裝置的邏輯框圖。
【具體實(shí)施方式】
[0023]本發(fā)明的基本構(gòu)思是，提供一種基于輪詢隊(duì)列的多媒體內(nèi)容懶加載方式:從獲取到的網(wǎng)頁(yè)內(nèi)容數(shù)據(jù)提取與多媒體內(nèi)容相關(guān)的網(wǎng)頁(yè)元素的信息，并記錄提取到的網(wǎng)頁(yè)元素的信息，由此，可基于記錄的網(wǎng)頁(yè)元素的信息，自動(dòng)而準(zhǔn)確地獲取位于瀏覽器視窗內(nèi)的網(wǎng)頁(yè)元素的信息，并將位于瀏覽器視窗內(nèi)的網(wǎng)頁(yè)元素對(duì)應(yīng)的多媒體內(nèi)容加載到網(wǎng)頁(yè)中，同時(shí)加載頁(yè)面中除了所述多媒體內(nèi)容以外的網(wǎng)頁(yè)內(nèi)容，并且顯示加載的網(wǎng)頁(yè)內(nèi)容，提升用戶網(wǎng)絡(luò)體驗(yàn)。
[0024]此外，與現(xiàn)有的圖片懶加載方法相比，本發(fā)明實(shí)施例所述的網(wǎng)頁(yè)多媒體內(nèi)容處理方法通用性、靈活性更強(qiáng)，進(jìn)而降低開發(fā)成本，提高開發(fā)效率。
[0025]下面結(jié)合附圖詳細(xì)描述本發(fā)明實(shí)施例的網(wǎng)頁(yè)多媒體內(nèi)容處理方法及裝置。
[0026]實(shí)施例一
[0027]圖1是示出本發(fā)明實(shí)施例一的網(wǎng)頁(yè)多媒體內(nèi)容處理方法的流程圖。可在如圖2所示的裝置上執(zhí)行該方法。
[0028]參照?qǐng)D1，在步驟S110，獲取網(wǎng)頁(yè)內(nèi)容數(shù)據(jù)。
[0029]具體地，當(dāng)用戶點(diǎn)擊某個(gè)網(wǎng)頁(yè)鏈接或完成輸入網(wǎng)址后，通過HTTP/HTTPS請(qǐng)求來從網(wǎng)頁(yè)服務(wù)器獲取相應(yīng)的網(wǎng)頁(yè)內(nèi)容數(shù)據(jù)。
[0030]在步驟S120，從所述網(wǎng)頁(yè)內(nèi)容數(shù)據(jù)提取與多媒體內(nèi)容相關(guān)的網(wǎng)頁(yè)元素的信息，并記錄提取到的所述網(wǎng)頁(yè)元素的信息。
[0031]具體地，可通過將提取到的所述網(wǎng)頁(yè)元素的信息插入待加載多媒體內(nèi)容隊(duì)列來完成網(wǎng)頁(yè)元素的信息的記錄過程。
[0032]根據(jù)本發(fā)明的示例性實(shí)施例，步驟S120還可包括:將所述網(wǎng)頁(yè)內(nèi)容數(shù)據(jù)當(dāng)中提取到的所述網(wǎng)頁(yè)元素的數(shù)據(jù)替換為指定的默認(rèn)信息。需要說明的是，所述指定的默認(rèn)信息可以是，但不限于，指定的文本信息、空白圖片或指定的圖片。這里，所述網(wǎng)頁(yè)元素的信息可包括所述多媒體內(nèi)容的下載地址或下載鏈接。
[0033]在具體的實(shí)現(xiàn)方式中，〈img>標(biāo)簽的src屬性是圖片的統(tǒng)一資源定位符(UniformResource Locator，URL)，也就是引用該圖片的絕對(duì)路徑或相對(duì)路徑。例如源代碼“〈imgsrc = 〃/i/eg_chinarose.jpg〃/>”，其加載顯示后是一張關(guān)于月季花的圖片。下面以“圖片”為例進(jìn)行詳細(xì)說明，從網(wǎng)頁(yè)內(nèi)容數(shù)據(jù)提取與圖片相關(guān)的文檔對(duì)象模型(Document ObjectModel，D0M)對(duì)象，例如img對(duì)象，將img對(duì)象添加到待加載圖片隊(duì)列中，保存其下載鏈接，方便后續(xù)圖片加載的處理。并將img對(duì)象的src屬性指向空白圖片或者指定的圖片(如loading圖片的地址)，以使瀏覽器暫時(shí)阻止加載圖片。
[0034]在步驟S130，加載頁(yè)面中除了所述多媒體內(nèi)容以外的網(wǎng)頁(yè)內(nèi)容，并且顯示加載的網(wǎng)頁(yè)內(nèi)容。
[0035]此時(shí)，與網(wǎng)頁(yè)中的多媒體內(nèi)容相關(guān)的數(shù)據(jù)被顯示為前述指定的默認(rèn)信息，而不即時(shí)加載這些多媒體內(nèi)容。
[0036]在步驟S140，通過單獨(dú)的線程，從記錄的所述網(wǎng)頁(yè)元素的信息中獲取位于瀏覽器視窗內(nèi)的網(wǎng)頁(yè)元素的信息，并將位于瀏覽器視窗內(nèi)的所述網(wǎng)頁(yè)元素對(duì)應(yīng)的多媒體內(nèi)容加載到網(wǎng)頁(yè)中。
[0037]根據(jù)本發(fā)明的示例性實(shí)施例，步驟S140可包括:對(duì)記錄的網(wǎng)頁(yè)元素的信息中的任一網(wǎng)頁(yè)元素的信息，獲取所述網(wǎng)頁(yè)元素相對(duì)于瀏覽器視窗的位置數(shù)據(jù)，如果其位置當(dāng)前是處于在瀏覽器視窗中，則根據(jù)所述網(wǎng)頁(yè)元素的信息從網(wǎng)頁(yè)服務(wù)器獲取相應(yīng)的多媒體內(nèi)容數(shù)據(jù)，并且將所述網(wǎng)頁(yè)元素對(duì)應(yīng)的多媒體內(nèi)容加載到網(wǎng)頁(yè)中。
[0038]在具體的實(shí)現(xiàn)方式中，可通過遍歷前述待加載多媒體內(nèi)容隊(duì)列的方式，獲取位于瀏覽器視窗內(nèi)的網(wǎng)頁(yè)元素的信息，并根據(jù)獲取的網(wǎng)頁(yè)元素的信息將位于瀏覽器視窗內(nèi)的網(wǎng)頁(yè)元素對(duì)應(yīng)的多媒體內(nèi)容加載到網(wǎng)頁(yè)中。通常，利用getBoundingClientRect函數(shù)獲得網(wǎng)頁(yè)中某個(gè)網(wǎng)頁(yè)元素的左、上、右和下分別相對(duì)瀏覽器視窗的位置。相應(yīng)地，本實(shí)施例可通過D0M對(duì)象的getBoundingClientRect函數(shù)來獲得圖片相對(duì)于瀏覽器視窗的位置數(shù)據(jù)，根據(jù)獲得的位置數(shù)據(jù)判斷圖片是否處于瀏覽器視窗中。仍以“圖片”為例，如果圖片位于瀏覽器視窗內(nèi)，則從待加載圖片隊(duì)列提取保存的下載鏈接(即原始的下載地址)，將src屬性從前述空白圖片替換成所述下載鏈接，從網(wǎng)頁(yè)服務(wù)器獲取與所述下載鏈接