ECHO.js 純javascript輕量級(jí)延遲加載的實(shí)例代碼
更新時(shí)間：2016年05月24日 16:09:48 投稿：jingxian
下面小編就為大家?guī)硪黄狤CHO.js 純javascript輕量級(jí)延遲加載的實(shí)例代碼。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
ECHO.js 純javascript輕量級(jí)延遲加載的實(shí)例代碼
演示
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<title>簡(jiǎn)單的JavaScript圖像延遲加載庫Echo.js</title>
<style>
.demo img { width: 736px; height: 490px; background: url(images/loading.gif) 50% no-repeat;}
</style>
</head>
<body>
<h1 style="margin: 40px; font: 32px Microsoft Yahei; text-align: center;">簡(jiǎn)單的JavaScript圖像延遲加載庫Echo.js演示</h1>
<div class="demo" style="width: 736px; margin: 0 auto;">
<img class="lazy" src="images/blank.gif" data-echo="images/big-1.jpg">
<img class="lazy" src="images/blank.gif" data-echo="images/big-2.jpg">
<img class="lazy" src="images/blank.gif" data-echo="images/big-3.jpg">
<img class="lazy" src="images/blank.gif" data-echo="images/big-4.jpg">
<img class="lazy" src="images/blank.gif" data-echo="images/big-5.jpg">
<img class="lazy" src="images/blank.gif" data-echo="images/big-6.jpg">
<img class="lazy" src="images/blank.gif" data-echo="images/big-7.jpg">
</div>
<script src="js/echo.min.js"></script>
<script>
Echo.init({
offset: 0,
throttle: 0
});
</script>
應(yīng)用
1.引入js, 并初始化
<script src="{sh::PUB}js/echo.min.js"></script>
<script>
Echo.init({
offset: 0,
throttle: 0
});
</script>
2.給圖片附上屬性
<img class="lazy" src="{sh::PUB}img/common/blank.gif" data-echo="{sh:$goods.logoimg}" alt="">
3.給未加載的圖片設(shè)置默認(rèn)背景，動(dòng)態(tài)的gif
.lazy{width:100%;height:100%;background: url({sh::PUB}img/common/loading.gif) 50% no-repeat;}
很方便，很實(shí)用。
要想進(jìn)一步提升網(wǎng)頁打開速度，可以優(yōu)化上傳的圖片。
網(wǎng)頁慢，無非是，一查詢慢，二圖片加載慢，三沒有使用延遲加載，四圖片數(shù)據(jù)太大。
根據(jù)這些原因，逐步解決。
提升用戶體驗(yàn)。
以上這篇ECHO.js 純javascript輕量級(jí)延遲加載的實(shí)例代碼就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
下面小編就為大家?guī)硪黄獪\談js中的this問題。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-08-08
這篇文章主要為大家詳細(xì)介紹了bootstrap select插件封裝成Vue2.0組件的相關(guān)方法，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-04-04
如何讓你的JavaScript函數(shù)更加優(yōu)雅詳解
在Js世界中有些操作會(huì)讓你無法理解，但是卻無比優(yōu)雅,下面這篇文章主要給大家介紹了關(guān)于如何讓你的JavaScript函數(shù)更加優(yōu)雅的相關(guān)資料,需要的朋友可以參考下2021-07-07
使用SyntaxHighlighter實(shí)現(xiàn)HTML高亮顯示代碼的方法
syntaxhighlighter是一個(gè)小開源項(xiàng)目，它可以在網(wǎng)頁中對(duì)各種程序源代碼語法進(jìn)行加亮顯示。2010-02-02
原生JavaScript實(shí)現(xiàn)九宮格抽獎(jiǎng)
這篇文章主要為大家詳細(xì)介紹了原生JavaScript實(shí)現(xiàn)九宮格抽獎(jiǎng)，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-06-06
前端導(dǎo)出word文件的多種方式以及導(dǎo)出excel文件
導(dǎo)出功能是項(xiàng)目開發(fā)中經(jīng)常會(huì)遇到的需求,在此就前端方面需要做的部分做一個(gè)總結(jié),這篇文章主要給大家介紹了關(guān)于前端導(dǎo)出word文件的多種方式以及導(dǎo)出excel文件的相關(guān)資料,需要的朋友可以參考下2024-08-08
全面總結(jié)Javascript對(duì)數(shù)組對(duì)象的各種操作
最近有個(gè)同事問了個(gè)問題，關(guān)于數(shù)組，對(duì)象和類數(shù)組的，仔細(xì)說起來都是基礎(chǔ)，其實(shí)都沒什么好講的，不過看到還是有很多朋友有些迷糊，決定還是寫出來吧，下面這篇文章主要給大家介紹了Javascript對(duì)數(shù)組對(duì)象的各種操作,需要的朋友可以參考借鑒。2017-01-01
JS PHP字符串截取函數(shù)實(shí)現(xiàn)原理解析
這篇文章主要介紹了JS PHP字符串截取函數(shù)實(shí)現(xiàn)原理解析,文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2020-08-08
JavaScript web網(wǎng)頁入門級(jí)開發(fā)詳解
Web框架正如前文所述, 在整個(gè)項(xiàng)目結(jié)構(gòu)中處于一個(gè)承上啟下的位置, 是整個(gè)項(xiàng)目的核心組件, 所以這次來聊聊Web框架的一些普適性特性和如何快速的入門2021-10-10
這篇文章主要介紹了JS比較2個(gè)日期間隔的方法,需要的朋友可以參考下2014-04-04