按需加載/懶加載-創(chuàng)新互聯(lián)

按需解析HTML

鎮(zhèn)賚ssl適用于網(wǎng)站、小程序/APP、API接口等需要進(jìn)行數(shù)據(jù)傳輸應(yīng)用場(chǎng)景，ssl證書未來市場(chǎng)廣闊！成為創(chuàng)新互聯(lián)的ssl證書銷售渠道，可以享受市場(chǎng)價(jià)格4-6折優(yōu)惠！如果有意向歡迎電話聯(lián)系或者加微信：18980820575（備注：SSL證書合作）期待與您的合作！

按需解析HTML，就是頁(yè)面一開始不解析HTML，根據(jù)需要來解析HTML。解析HTML都是需要一定時(shí)間，特別是HTML中包含有img標(biāo)簽、引用了背景圖片時(shí)，如果一開始就解析，那么勢(shì)必會(huì)增加請(qǐng)求數(shù)。常見的有對(duì)話框、拉菜單、多標(biāo)簽的內(nèi)容展示等，這些一開始是不需要解析，可以按需解析。

實(shí)現(xiàn)按需解析，首先用<script type=”text/x-template”>html</sccript> 這個(gè)標(biāo)簽來對(duì)忽略對(duì)HTML的解析。然后根據(jù)觸發(fā)的動(dòng)作，把script里面的HTML獲取出來，填充到對(duì)應(yīng)的節(jié)點(diǎn)中。

示例代碼如下：

<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>按需解析HTML</title> </head> <body> <script type="text/x-template" id="suc_subscription">  <div>  <img src="/upload/otherpic41/按需加載.jpg" /> </div> </script> <div id="success_dilog"></div> <input type="button" value="點(diǎn)我展示HTML" onclick="showHTML()" /> <script> function showHTML(){ document.getElementById('success_dilog').innerHTML = document.getElementById('suc_subscription').innerHTML; } </script> </body> </html>

DEMO：http://tid.tenpay.com/wp-content/uploads/2013/06/demo.html

在頁(yè)面加載結(jié)束后，看到并沒有圖片加載的請(qǐng)求。

點(diǎn)擊按鈕之后執(zhí)行了加載圖片的操作，此時(shí)才在網(wǎng)絡(luò)中看到圖片的請(qǐng)求

這樣減少了加載頁(yè)面最開始的請(qǐng)求，減輕服務(wù)器的負(fù)載。

按需加載圖片

按需加載圖片，就是讓圖片默認(rèn)開始不加載，而且在接近可視區(qū)域范圍時(shí)，再進(jìn)行加載。也稱之為懶惰加載。大家都知道，圖片一下子全部都加載，請(qǐng)求的次數(shù)將會(huì)增加，勢(shì)必影響性能。

先來看下懶惰加載的實(shí)現(xiàn)原理。它的觸發(fā)動(dòng)作是：當(dāng)滾動(dòng)條拉動(dòng)到某個(gè)位置時(shí)，即將進(jìn)入可視范圍的圖片需要加載。實(shí)現(xiàn)的過程分為下面幾個(gè)步驟：

1）生成<img data-src=”url”>標(biāo)簽時(shí)，用data-src來保存圖片地址；

（相當(dāng)于加載轉(zhuǎn)圈的圖片）

2）記錄的圖片data-src都保存到數(shù)組里；

（保存真正的圖片）

3）對(duì)滾動(dòng)條進(jìn)行事件綁定,假設(shè)綁定的函數(shù)為function lazyload(){};

4）在函數(shù)lazyload中，按照下面思路實(shí)現(xiàn)：計(jì)算圖片的Y坐標(biāo)，并計(jì)算可視區(qū)域的高度height，當(dāng)Y小于等于(height+ scrollTop)時(shí)，圖片的src的值用data-src的來替換，從而來實(shí)現(xiàn)圖片的按需加載；

當(dāng)前題目：按需加載/懶加載-創(chuàng)新互聯(lián)
URL地址：http://www.rwnh.cn/article8/dohiop.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供關(guān)鍵詞優(yōu)化、商城網(wǎng)站、Google、營(yíng)銷型網(wǎng)站建設(shè)、自適應(yīng)網(wǎng)站、微信公眾號(hào)

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容

内射老阿姨1区2区3区4区_久久精品人人做人人爽电影蜜月_久久国产精品亚洲77777_99精品又大又爽又粗少妇毛片

按需加載/懶加載-創(chuàng)新互聯(lián)