簡單的JavaScript圖像延遲加載庫Echo.js

時間 2019-12-14

標籤簡單 javascript 圖像延遲加載 echo.js echo 欄目 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>

應用javascript

1.引入js,並初始化css

<script src="{sh::PUB}js/echo.min.js"></script> <script> Echo.init({  offset: 0,  throttle: 0 }); </script>

2.給圖片附上屬性html

<img class="lazy" src="{sh::PUB}img/common/blank.gif" data-echo="{sh:$goods.logoimg}" alt="">

3.給未加載的圖片設置默認背景，動態的gifjava

.lazy{width:100%;height:100%;background: url({sh::PUB}img/common/loading.gif) 50% no-repeat;}

很方便，很實用。
要想進一步提高網頁打開速度，能夠優化上傳的圖片。django

網頁慢，無非是，一查詢慢，二圖片加載慢，三沒有使用延遲加載，四圖片數據太大。優化

根據這些緣由，逐步解決。ui

提高用戶體驗。url

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。