原生js實現圖片懶加載
阿新 • • 發佈：2018-04-01
發送 else HR 默認 div adc dom操作 move +=
原理：
將頁面中的img標簽src指向一張小圖片或者src為空，然後定義data-src（這個屬性可以自定義命名，我自己用data-src）屬性指向真實的圖片。
src指向一張默認的圖片，否則當src為空時也會向服務器發送一次請求。可以指向loading的地址。
代碼實現:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>圖片懶加載</title> </head> <style> img{ width: 100%; height: 300px; } </style> <body> <div id="lazyLoad"> <img src="https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=1465559144,776586395&fm=27&gp=0.jpg" data-src="https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=1569565431,1808959505&fm=11&gp=0.jpg"alt=""> <img src="https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=1465559144,776586395&fm=27&gp=0.jpg" data-src="https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=1569565431,1808959505&fm=11&gp=0.jpg" alt=""> <img src="https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=1465559144,776586395&fm=27&gp=0.jpg"data-src="https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=1569565431,1808959505&fm=11&gp=0.jpg" alt=""> <img src="https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=1465559144,776586395&fm=27&gp=0.jpg" data-src="https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=1569565431,1808959505&fm=11&gp=0.jpg" alt=""> <img src="https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=1465559144,776586395&fm=27&gp=0.jpg" data-src="https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=1569565431,1808959505&fm=11&gp=0.jpg" alt=""> <img src="https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=1465559144,776586395&fm=27&gp=0.jpg" data-src="https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=1569565431,1808959505&fm=11&gp=0.jpg" alt=""> <img src="https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=1465559144,776586395&fm=27&gp=0.jpg" data-src="https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=1569565431,1808959505&fm=11&gp=0.jpg" alt=""> <img src="https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=1465559144,776586395&fm=27&gp=0.jpg" data-src="https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=1569565431,1808959505&fm=11&gp=0.jpg" alt=""> <img src="https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=1465559144,776586395&fm=27&gp=0.jpg" data-src="https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=1569565431,1808959505&fm=11&gp=0.jpg" alt=""> <img src="https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=1465559144,776586395&fm=27&gp=0.jpg" data-src="https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=1569565431,1808959505&fm=11&gp=0.jpg" alt=""> <img src="https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=1465559144,776586395&fm=27&gp=0.jpg" data-src="https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=1569565431,1808959505&fm=11&gp=0.jpg" alt=""> </div> </body> <script> window.onload = function(){ function lazyLoad(){ var lazyLoadContainer = document.getElementById(‘lazyLoad‘); var imgLen = lazyLoadContainer.getElementsByTagName(‘img‘).length;//如果圖片長度不是固定，而是分頁請求的話，則放在return函數中 var imgList = lazyLoadContainer.getElementsByTagName(‘img‘); var screenW = document.documentElement.clientWidth; var count = 0;//統計懶加載多少圖片 return function(){ console.log(count); var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;//兼容不同瀏覽器 for(var i = count; i<imgLen; i++){ //console.log(‘offsetTop‘, imgList[i].offsetTop); //console.log(‘scrollHeight‘, scrollTop + screenW); if(imgList[i].offsetTop < scrollTop + screenW-300){ if(imgList[i].getAttribute(‘src‘) === ‘https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=1465559144,776586395&fm=27&gp=0.jpg‘){ imgList[i].src = imgList[i].getAttribute(‘data-src‘); count += 1; } } } } } var useLazyLoad = lazyLoad(); useLazyLoad(); //函數節流 function throttle(action, delay, time){ var timer, startTime = new Date(); return function(){ var context = this, arg = arguments, curTime = new Date(); if(timer){ clearTimeout(timer); } if(curTime - startTime > time){ action.apply(context,arg); startTime = curTime; }else{ timer = setTimeout(function(){ action.apply(context,arg); },delay) } } } window.addEventListener(‘scroll‘, throttle(useLazyLoad,500,100)) } </script> </html>
函數節流和函數去抖
以下場景往往由於事件頻繁被觸發，因而頻繁執行DOM操作、資源加載等重行為，導致UI停頓甚至瀏覽器崩潰。
- window對象的resize、scroll事件
- 拖拽時的mousemove事件
- 射擊遊戲中的mousedown、keydown事件
-
文字輸入、自動完成的keyup事件
當調用動作n毫秒後，才會執行該動作，若在這n毫秒內又調用此動作則將重新計算執行時間。這種比較適合window的resize事件（函數去抖）；實際需求大多為停止改變大小n毫秒後執行後續處理；而其他事件大多的需求是以一定的頻率執行後續處理（函數節流）
function debounce(action,delay){//函數去抖 var timer = null; return function(){ //console.log(‘timer‘,timer) if(timer){ clearTimeout(timer); } var context = this; arg = arguments; timer = setTimeout(function(){ action.apply(context,arg) },delay); } } function throttle(action, delay, time){//函數節流 var timer = null, startTime = new Date(); return function(){ if(timer){ clearTimeout(timer); } var curTime = new Date(); var context = this, arg = arguments; if(curTime - startTime > time){ action.apply(context,arg); startTime = curTime; }else{ timer = setTimeout(function(){ action.apply(context,arg)//如果直接傳arguments，到時打印出來的是undefined },delay) } } } var scrollFunc = debounce(function(a){ console.log(a); },500); var scrollThrottle = throttle(function(a){ console.log(a) },5000, 1000) window.onscroll = function(){ //scrollFunc(22); scrollThrottle(88) }
原生js實現圖片懶加載