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