今天就跟大家聊聊有關(guān)JavaScript圖片延遲加載微型庫(kù)Echo.js是怎樣的，可能很多人都不太了解，為了讓大家更加了解，小編給大家總結(jié)了以下內(nèi)容，希望大家根據(jù)這篇文章可以有所收獲。

創(chuàng)新互聯(lián)公司是一家專(zhuān)業(yè)提供柳南企業(yè)網(wǎng)站建設(shè),專(zhuān)注與成都網(wǎng)站設(shè)計(jì)、做網(wǎng)站、成都外貿(mào)網(wǎng)站建設(shè)公司、成都h5網(wǎng)站建設(shè)、小程序制作等業(yè)務(wù)。10年已為柳南眾多企業(yè)、政府機(jī)構(gòu)等服務(wù)。創(chuàng)新互聯(lián)專(zhuān)業(yè)網(wǎng)站制作公司優(yōu)惠進(jìn)行中。

Echo.js是一個(gè)標(biāo)準(zhǔn)的獨(dú)立的Javascript圖片懶加載（延遲加載）庫(kù)，它非常小巧快速，只有2KB，它使用HTML5的 data-*屬性，延遲請(qǐng)求加載圖片資源，不依賴(lài)任意第三方插件庫(kù)，特別適用于移動(dòng)端需要加載大量圖片的應(yīng)用。

如何使用

1、引入文件

<script src="js/echo.min.js"></script>

2、HTML結(jié)構(gòu)

<img src="img/blank.gif" alt="Photo" data-echo="img/photo.jpg">

blank.gif 是一個(gè) 1 x 1 的圖片，用做默認(rèn)圖片，data-echo 的屬性值是圖片的真實(shí)地址。你可以給圖片設(shè)置寬度和高度，或者在 CSS 中設(shè)置，否則似乎很底部很底部的圖片才會(huì)延遲加載。

3、JavaScript

echo.init({    offset: 100,    throttle: 250,    unload: false,    callback: function (element, op) {      console.log('loaded ok.');    } });

常用參數(shù)及方法說(shuō)明

參數(shù)描述默認(rèn)值

offset離可視區(qū)域多少像素的圖片可以被加載0throttle圖片延遲多少毫秒加載250debounce防抖動(dòng)trueunload告訴echo是加載還是卸載視圖中的圖片，當(dāng)圖片離開(kāi)視圖區(qū)域時(shí)觸發(fā)falsecallback回調(diào)函數(shù)，用來(lái)檢測(cè)圖片是否加載function()

最后echo.js還提供了一個(gè).render()方法，用法如下：

echo.render();

應(yīng)用場(chǎng)景：當(dāng)你的頁(yè)面沒(méi)有發(fā)生滾動(dòng)，而你想加載即將要顯示的圖片，如圖片輪播，當(dāng)?shù)谝粡垐D片顯示完，接著滑動(dòng)展示第二張圖片，這個(gè)時(shí)候使用echo.render();提前加載第二張圖片，就不會(huì)出現(xiàn)圖片加載卡頓白屏等現(xiàn)象。

看完上述內(nèi)容，你們對(duì)JavaScript圖片延遲加載微型庫(kù)Echo.js是怎樣的有進(jìn)一步的了解嗎？如果還想了解更多知識(shí)或者相關(guān)內(nèi)容，請(qǐng)關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，感謝大家的支持。

網(wǎng)頁(yè)標(biāo)題：JavaScript圖片延遲加載微型庫(kù)Echo.js是怎樣的-創(chuàng)新互聯(lián)
當(dāng)前路徑：http://www.chinadenli.net/article12/doiddc.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站設(shè)計(jì)、網(wǎng)站導(dǎo)航、企業(yè)建站、移動(dòng)網(wǎng)站建設(shè)、用戶體驗(yàn)、域名注冊(cè)

廣告

聲明：本網(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í)需注明來(lái)源： 創(chuàng)新互聯(lián)