JS圖片懶加載技術(shù)實現(xiàn)過程解析
更新時間：2020年07月27日 10:57:31 作者：-零
這篇文章主要介紹了JS圖片懶加載技術(shù)實現(xiàn)過程解析,文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下
懶加載技術(shù)
懶加載（LazyLoad）是前端優(yōu)化的一種有效方式，極大的提升用戶體驗，圖片一直是頁面加載的流浪大戶，現(xiàn)在一張圖片幾兆已經(jīng)是很正常的事，遠遠大于代碼的大小。
原理：頁面加載后只讓文檔可視區(qū)內(nèi)的圖片顯示，其它不顯示，隨著用戶對頁面的滾動，判斷其區(qū)域位置，生成img標簽，讓到可視區(qū)的圖片加載出來。
所用相關(guān)技術(shù)：給img加屬性 (例如data-src），將圖片的地址賦值給他，這樣就生成img標簽后再把data-src的值賦給img的src（通過dataset.src或者getAttribute('src'),再賦值給img.setAttribute('src')）。
jqueryLazyload方式
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
margin:0px;
padding: 0;
}
.wrap{
overflow: hidden;
width:915px;
background:#2d2d2d;
margin:50px auto;
border-radius:10px;
/*font-size:0px;*/
}
.wrap img{
float:left;
display: block;
width:280px;
height:180px;
margin:10px 10px;
border:2px solid #7c7c7c;
border-radius:10px;
}
</style>
</head>
<body>
<div class="wrap">
<img src="js/images2/1.jpg" />
<img src="js/images2/2.jpg" />
<img src="js/images2/3.jpg" />
<img src="js/images2/4.jpg" />
<img src="js/images2/5.jpg" />
<img src="js/images2/6.jpg" />
<img src="js/images2/7.jpg" />
<img src="js/images2/1.jpg" />
<img src="js/images2/2.jpg" />
<img src="js/images2/3.jpg" />
<img src="js/images2/4.jpg" />
<img src="js/images2/5.jpg" />
<img src="js/images2/6.jpg" />
<img src="js/images2/7.jpg" />
<img src="js/images2/1.jpg" />
<img src="js/images2/2.jpg" />
<img src="js/images2/3.jpg" />
<img src="js/images2/4.jpg" />
<img src="js/images2/5.jpg" />
<img src="js/images2/6.jpg" />
<img src="js/images2/7.jpg" />
<img src="js/images2/1.jpg" />
<img src="js/images2/2.jpg" />
<img src="js/images2/3.jpg" />
<img src="js/images2/4.jpg" />
<img src="js/images2/5.jpg" />
<img src="js/images2/6.jpg" />
<img src="js/images2/7.jpg" />
<img src="js/images2/1.jpg" />
<img src="js/images2/2.jpg" />
<script src="js/jquery-1.11.1.min.js"></script>
<script src="js/lazyload.js"></script>
<script>
$("img").lazyload({
placeholder :"images2/loading.gif", //用圖片提前占位
// placeholder,值為某一圖片路徑.此圖片用來占據(jù)將要加載的圖片的位置,待圖片加載時,占位圖則會隱藏
effect: "fadeIn", // 載入使用何種效果
// effect(特效),值有show(直接顯示),fadeIn(淡入),slideDown(下拉)等,常用fadeIn
threshold: 200, // 提前開始加載
// threshold,值為數(shù)字,代表頁面高度.如設(shè)置為200,表示滾動條在離目標位置還有200的高度時就開始加載圖片,可以做到不讓用戶察覺
// event: 'click', // 事件觸發(fā)時才加載
// event,值有click(點擊),mouseover(鼠標劃過),sporty(運動的),foobar(…).可以實現(xiàn)鼠標莫過或點擊圖片才開始加載,后兩個值未測試…
//container: $("#container"), // 對某容器中的圖片實現(xiàn)效果
// container,值為某容器.lazyload默認在拉動瀏覽器滾動條時生效,這個參數(shù)可以讓你在拉動某DIV的滾動條時依次加載其中的圖片
//failurelimit : 10 // 圖片排序混亂時
// failurelimit,值為數(shù)字.lazyload默認在找到第一張不在可見區(qū)域里的圖片時則不再繼續(xù)加載,但當HTML容器混亂的時候可能出現(xiàn)可見區(qū)域內(nèi)圖片并沒加載出來的情況,failurelimit意在加載N張可見區(qū)域外的圖片,以避免出現(xiàn)這個問題.
});
</script>
</div>
</body>
</html>
echo.js方式
echo.js是一款非常簡單實用輕量級的圖片延時加載插件，如果你的項目中沒有依賴jquery，那么這將是個不錯的選擇，50行代碼，壓縮后才1k。當然你完全可以集成到自己項目中去。
下載地址：https://github.com/helijun/helijun/tree/master/plugin/echo
<style>
.demo img {
width: 736px;
height: 490px;
background: url(images/loading.gif) 50% no-repeat;}
</style>
<div class="demo"> <img class="lazy" src="images/blank.gif" data-echo="images/big-1.jpg"> </div>
<script src="js/echo.min.js"></script>
<script>
Echo.init({
offset: 0,//離可視區(qū)域多少像素的圖片可以被加載
throttle: 0 //圖片延時多少毫秒加載
});
</script>
說明：blank.gif是一張背景圖片，包含在插件里了。圖片的寬高必須設(shè)定，當然，可以使用外部樣式對多張圖片統(tǒng)一控制大小。data-echo指向的是真正的圖片地址。
以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
本篇文章主要介紹了js制作簡單的音樂播放器的示例代碼，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-08-08
微信內(nèi)置瀏覽器私有接口WeixinJSBridge介紹
這篇文章主要介紹了微信內(nèi)置瀏覽器私有接口WeixinJSBridge介紹,本文講解了發(fā)送給好友、分享函數(shù)、隱藏工具欄、隱藏三個點按鈕等功能,需要的朋友可以參考下2015-05-05
這篇文章主要為大家介紹了JavaScript Window.open 彈窗使用詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪2023-11-11
如何給Web頁面增加夜間模式功能? 其實所謂的夜間模式就是在頁面上增加一個透明的遮罩層，但是遮罩層會擋住頁面元素， 解決方法是 添加DIV，給DIV的outline屬性一個很大的outline-width值，用outline的邊框作為遮罩，這樣既能正常點擊頁面元素，又能達到夜間模式的效果2014-01-01
iFrame小應用2008-12-12
這篇文章主要介紹了JS模板編譯的實現(xiàn)詳情，編譯是一種格式變成另一種格式的過程。編譯會導致好的結(jié)果，比如書寫簡單的代碼，編譯出來復雜的代碼；或者提高代碼的使用性能2022-07-07
gridpanel動態(tài)加載數(shù)據(jù)的實例代碼
這篇文章介紹了gridpanel動態(tài)加載數(shù)據(jù)的實例代碼，有需要的朋友可以參考一下2013-07-07
這篇文章主要介紹了使用mpvue搭建一個初始小程序及項目配置方法,需要的朋友可以參考下2018-12-12
前端實現(xiàn)讀取word文件并將其原樣式展示的幾種方案
在前端直接讀取并原樣展示W(wǎng)ord文檔是一個相對復雜的任務,因為Word文檔的格式(如.doc或.docx)與Web技術(shù)棧使用的格式(HTML、CSS)不兼容,這篇文章主要給大家介紹了關(guān)于前端實現(xiàn)讀取word文件并將其原樣式展示的幾種方案,需要的朋友可以參考下2024-08-08
這篇文章主要給大家介紹了關(guān)于如何利用Typescript封裝本地存儲的相關(guān)資料,文中通過實例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下2022-01-01