頁面資源按需加載的方法及裝置的制造方法
【技術(shù)領(lǐng)域】
[0001]本發(fā)明涉及網(wǎng)頁開發(fā)技術(shù)領(lǐng)域，特別涉及一種頁面資源按需加載的方法及裝置。
【背景技術(shù)】
[0002]目前，當(dāng)用戶瀏覽網(wǎng)頁時(shí)，網(wǎng)頁的加載機(jī)制是一次性加載網(wǎng)頁中的所有圖片，需占用大量網(wǎng)絡(luò)帶寬以及流量進(jìn)行加載，導(dǎo)致用戶所需網(wǎng)絡(luò)以及流量產(chǎn)生高強(qiáng)度使用，同時(shí)，網(wǎng)頁端服務(wù)器的壓力也較大。因此，瀏覽網(wǎng)頁時(shí)，使網(wǎng)頁頁面按需加載獲取信息，便可降低網(wǎng)頁端服務(wù)器壓力，降低網(wǎng)絡(luò)占用以及減少流量使用，同時(shí)，還可以加快網(wǎng)頁加載速度。

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

[0003]本發(fā)明的主要目的為提供一種頁面資源按需加載的方法及裝置，降低網(wǎng)頁端服務(wù)器壓力，降低網(wǎng)絡(luò)占用以及減少流量使用，同時(shí)，還可以加快網(wǎng)頁加載速度。
[0004]本發(fā)明提出一種頁面資源按需加載的方法，包括:
[0005]將頁面中圖片地址保存在偽圖片標(biāo)簽內(nèi)，并獲取圖片在頁面中的位置信息放入圖片位置數(shù)組中；
[0006]對(duì)頁面的滾動(dòng)條進(jìn)行事件監(jiān)聽，根據(jù)位置信息從所述圖片位置數(shù)組中檢索對(duì)應(yīng)的圖片；
[0007]根據(jù)所述位置信息檢索出圖片對(duì)應(yīng)的圖片地址，并將所述圖片地址從所述偽圖片標(biāo)簽內(nèi)移動(dòng)至真圖片標(biāo)簽內(nèi)，進(jìn)行加載。
[0008]進(jìn)一步地，所述獲取圖片在頁面中的位置信息放入圖片位置數(shù)組中的步驟為:
[0009]獲取頁面中的圖片距離頁面頂部的距離信息，并將所述距離信息放入圖片位置數(shù)組中。
[0010]進(jìn)一步地，所述將頁面中圖片地址保存在偽圖片標(biāo)簽內(nèi)的步驟為:
[0011 ]通過JavaScript腳本將圖片地址暫時(shí)存放在偽圖片標(biāo)簽內(nèi)。
[0012]進(jìn)一步地，所述對(duì)頁面的滾動(dòng)條進(jìn)行事件監(jiān)聽，根據(jù)位置信息從所述圖片位置數(shù)組中檢索對(duì)應(yīng)的圖片的步驟包括:
[0013]通過JavaScript腳本對(duì)滾動(dòng)條進(jìn)行事件監(jiān)聽；當(dāng)所述滾動(dòng)條滾動(dòng)時(shí)，滾動(dòng)條對(duì)應(yīng)頁面中的圖片發(fā)生改變，根據(jù)滾動(dòng)條對(duì)應(yīng)的圖片的位置信息從所述圖片位置數(shù)組中檢索對(duì)應(yīng)的圖片。
[0014]進(jìn)一步地，所述根據(jù)位置信息檢索出圖片對(duì)應(yīng)的圖片地址，并將所述圖片地址從所述偽圖片標(biāo)簽內(nèi)移動(dòng)至真圖片標(biāo)簽內(nèi)，進(jìn)行加載的步驟包括:
[0015]將圖片的圖片地址從所述偽圖片標(biāo)簽內(nèi)移動(dòng)至真圖片標(biāo)簽內(nèi)的src屬性中，對(duì)圖片自動(dòng)進(jìn)行加載。
[0016]本發(fā)明還提供了一種頁面資源按需加載的裝置，包括:
[0017]獲取存放單元，將頁面中圖片地址存放在偽圖片標(biāo)簽內(nèi)，并獲取圖片在頁面中的位置信息放入圖片位置數(shù)組中；
[0018]監(jiān)聽檢索單元，對(duì)頁面的滾動(dòng)條進(jìn)行事件監(jiān)聽，根據(jù)位置信息從所述圖片位置數(shù)組中檢索對(duì)應(yīng)的圖片；
[0019]移動(dòng)加載單元，根據(jù)所述位置信息檢索出圖片對(duì)應(yīng)的圖片地址，并將所述圖片地址從所述偽圖片標(biāo)簽內(nèi)移動(dòng)至真圖片標(biāo)簽內(nèi)，進(jìn)行加載。
[0020]進(jìn)一步地，所述獲取存放單元獲取頁面中的圖片距離頁面頂部的距離信息，并將所述距離信息放入圖片位置數(shù)組中。
[0021 ]進(jìn)一步地，所述獲取存放單元通過JavaScript腳本將頁面中圖片地址暫時(shí)存放在偽圖片標(biāo)簽內(nèi)。
?0022] 進(jìn)一步地，所述監(jiān)聽檢索單元通過JavaScript腳本對(duì)滾動(dòng)條進(jìn)行事件監(jiān)聽；當(dāng)所述滾動(dòng)條滾動(dòng)時(shí)，滾動(dòng)條對(duì)應(yīng)頁面中的圖片發(fā)生改變，根據(jù)滾動(dòng)條對(duì)應(yīng)的圖片的位置信息從所述圖片位置數(shù)組中檢索對(duì)應(yīng)的圖片。
[0023]進(jìn)一步地，所述移動(dòng)加載單元將圖片的圖片地址從所述偽圖片標(biāo)簽內(nèi)移動(dòng)至真圖片標(biāo)簽內(nèi)的src屬性中，對(duì)圖片自動(dòng)進(jìn)行加載。
[0024]本發(fā)明提出的頁面資源按需加載的方法及裝置，具有以下有益效果:
[0025]本發(fā)明提出的頁面資源按需加載的方法及裝置，將頁面中的圖片地址存放在偽圖片標(biāo)簽中，避免圖片一次性全部加載占用太多網(wǎng)絡(luò)以及流量，可降低網(wǎng)頁端服務(wù)器壓力;通過監(jiān)聽滾動(dòng)條位置對(duì)應(yīng)頁面中的圖片，檢索對(duì)應(yīng)的圖片，將其圖片地址移動(dòng)至真圖片標(biāo)簽中，自動(dòng)加載圖片，實(shí)現(xiàn)頁面資源按需加載，降低網(wǎng)頁端服務(wù)器壓力，提升網(wǎng)頁加載速度。
【附圖說明】
[0026]圖1是本發(fā)明一實(shí)施例中的頁面資源按需加載的方法示意圖；
[0027]圖2是本發(fā)明一實(shí)施例中的頁面資源按需加載的方法流程示意圖；
[0028]圖3是本發(fā)明一實(shí)施例中的頁面資源按需加載的裝置結(jié)構(gòu)示意圖。
[0029]本發(fā)明目的的實(shí)現(xiàn)、功能特點(diǎn)及優(yōu)點(diǎn)將結(jié)合實(shí)施例，參照附圖做進(jìn)一步說明。
【具體實(shí)施方式】
[0030]應(yīng)當(dāng)理解，此處所描述的具體實(shí)施例僅僅用以解釋本發(fā)明，并不用于限定本發(fā)明。
[0031]參照?qǐng)D1，為本發(fā)明一實(shí)施例中的頁面資源按需加載的方法示意圖。
[0032]本發(fā)明一實(shí)施例中提出一種頁面資源按需加載的方法，包括:
[0033]步驟SI，將頁面中圖片地址保存在偽圖片標(biāo)簽內(nèi)，并獲取圖片在頁面中的位置信息放入圖片位置數(shù)組中；
[0034]步驟S2，對(duì)頁面的滾動(dòng)條進(jìn)行事件監(jiān)聽，根據(jù)位置信息從上述圖片位置數(shù)組中檢索對(duì)應(yīng)的圖片；
[0035]步驟S3，根據(jù)上述位置信息檢索出圖片對(duì)應(yīng)的圖片地址，并將上述圖片地址從上述偽圖片標(biāo)簽內(nèi)移動(dòng)至真圖片標(biāo)簽內(nèi)，進(jìn)行加載。
[0036]上述步驟SI中，獲取圖片在頁面中的位置信息放入圖片位置數(shù)組中的具體步驟為:
[0037]獲取頁面中的圖片距離頁面頂部的距離信息，并將上述距離信息放入圖片位置數(shù)組中。頁面中的圖片距離頁面頂部的距離信息與滾動(dòng)條對(duì)應(yīng)，滾動(dòng)條滾動(dòng)時(shí)，所對(duì)應(yīng)的圖片也在發(fā)生滾動(dòng)，監(jiān)控滾動(dòng)條的位置便可智能獲取對(duì)應(yīng)的圖片。
[0038]其中，將圖片地址保存在偽圖片標(biāo)簽內(nèi)的步驟為:
[0039]通過JavaScript腳本(JS，爪哇腳本)將頁面中的圖片地址暫時(shí)存放在偽圖片標(biāo)簽內(nèi)。將圖片地址暫時(shí)存放在偽圖片標(biāo)簽內(nèi)，使得打開網(wǎng)頁時(shí)，不會(huì)一次性加載所有圖片，防止占用過多網(wǎng)絡(luò)帶寬以及流量，同時(shí)還可以降低服務(wù)器壓力。
[0040]上述步驟S2中，對(duì)頁面的滾動(dòng)條進(jìn)行事件監(jiān)聽，根據(jù)位置信息從上述圖片位置數(shù)組中檢索對(duì)應(yīng)的圖片的步驟包括:
[0041]通過JavaScript腳本對(duì)滾動(dòng)條進(jìn)行事件監(jiān)聽；當(dāng)上述滾動(dòng)條滾動(dòng)時(shí)，滾動(dòng)條對(duì)應(yīng)頁面中的圖片發(fā)生改變，根據(jù)滾動(dòng)條對(duì)應(yīng)的圖片的位置信息從上述圖片位置數(shù)組中檢索對(duì)應(yīng)的圖片。
[0042]進(jìn)一步地，上述步驟S3中，根據(jù)位置信息檢索出圖片對(duì)應(yīng)的圖片地址，并將上述圖片地址從上述偽圖片標(biāo)簽內(nèi)移動(dòng)至真圖片標(biāo)簽內(nèi)，進(jìn)行加載的步驟包括:
[0043]將圖片的圖片地址從上述偽圖片標(biāo)簽內(nèi)移動(dòng)至真圖片標(biāo)簽內(nèi)的src(source)屬性中，對(duì)圖片自動(dòng)進(jìn)行加載。上述真圖片標(biāo)簽為img標(biāo)簽，在HTML語言中，網(wǎng)頁中插入圖片所用標(biāo)簽為img標(biāo)簽，img標(biāo)簽的src屬性用來指定圖片具體地址信息，當(dāng)圖片地址放入img標(biāo)簽的src屬性中時(shí)，頁面便會(huì)對(duì)圖片自動(dòng)進(jìn)行加載。
[0044]目前，當(dāng)用戶瀏覽網(wǎng)頁時(shí)，多數(shù)網(wǎng)頁都是一次性加載完網(wǎng)頁內(nèi)的所有圖片，因此，需占用較多網(wǎng)絡(luò)帶寬以及耗費(fèi)大量流量，同時(shí)加大網(wǎng)頁端服務(wù)器壓力，使得加載速度變慢。而在本實(shí)施例中，通過JavaScript腳本將頁面中的圖片地址放入偽圖片標(biāo)簽(本實(shí)施例中，設(shè)置為vsrc標(biāo)簽)內(nèi)，而非img標(biāo)簽，不會(huì)自動(dòng)加載所有圖片；當(dāng)用戶滾動(dòng)滾動(dòng)條時(shí)，頁面可視區(qū)域發(fā)生改變?？梢晠^(qū)域內(nèi)對(duì)應(yīng)的圖片也會(huì)進(jìn)行滾動(dòng)，通過JavaScript腳本監(jiān)控滾動(dòng)條的位置對(duì)應(yīng)可視區(qū)域內(nèi)圖片的位置信息，檢索圖片位置數(shù)組中的圖片，檢索出圖片對(duì)應(yīng)的圖片地址，并將圖片地址從偽圖片標(biāo)簽內(nèi)移動(dòng)至img標(biāo)簽的src屬性中，頁面便會(huì)對(duì)圖片自動(dòng)進(jìn)行加載。如此，便實(shí)現(xiàn)了根據(jù)頁面的可視區(qū)域，按需加載可視區(qū)域內(nèi)的圖片，降低網(wǎng)頁端服務(wù)器壓力的同時(shí)，提升頁面加載速度，減少網(wǎng)絡(luò)帶寬占用以及流量的使用。
[0045]參照?qǐng)D2，為本發(fā)明一實(shí)施例中的頁面資源按需加載的方法流程示意圖。
[0046]在本實(shí)施例中，包括:步驟S10，存放圖片地址以及圖片位置信息;通過JavaScript腳本將頁面中的圖片地址放入偽圖片標(biāo)簽內(nèi)，而非img標(biāo)簽，則不會(huì)自動(dòng)加載頁面所有圖片；同時(shí)，將圖片在頁面中的位置信息放入圖片位置數(shù)組中。
[0047]步驟S20，監(jiān)控滾動(dòng)條;當(dāng)用戶滾動(dòng)滾動(dòng)條時(shí)，頁面可視區(qū)域發(fā)生改變?？梢晠^(qū)域內(nèi)對(duì)應(yīng)的圖片也會(huì)進(jìn)行滾動(dòng)，通過JavaScript腳本監(jiān)控滾動(dòng)條的位置對(duì)應(yīng)可視區(qū)域內(nèi)圖片的位置信息。
[0048]步驟S30;滾動(dòng)條位置改變時(shí)，檢索位置數(shù)組中對(duì)應(yīng)的圖片。