實際項目開放中,特別是電商項目,因爲有大量的圖片加載必然會影響性能,因此實現圖片的懶加載是很是有必要的。javascript
標籤的data-屬性 可視區域的監聽
<img alt="loading..." data-src="images/1.jpg"> 當咱們監聽到圖片進入可視區域後,就將data-src到值賦值給src屬性 <script> var images = document.querySelectorAll('img'); //ES6方法,也能夠直接使用for語句 Array.from(images).forEach((el)=>{ el.src = el.dataset.src; }) </script>
rectObject = object.getBoundingClientRect();
返回值是一個 DOMRect 對象,這個對象是由該元素的 getClientRects()
方法返回的一組矩形的集合, 即:是與該元素相關的CSS 邊框集合 。DOMRect 對象包含了一組用於描述邊框的只讀屬性——left、top、right和bottom,單位爲像素。除了 width 和 height 外的屬性都是相對於視口的左上角位置而言的。java
經過這個API,咱們就很容易獲取img元素相對於視口的頂點位置"rectObject.top",只要這個值小於瀏覽器的高度(window.innerHeight)就說明進入可視區域。若是要提早加載,能夠添加將瀏覽器的高度加值。瀏覽器
function isInSight(el){ const bound = el.getBoundingClientRect(); const clientHeight = window.innerHeight; return bound.top <= clientHeight + 100; }
實現圖片加載函數
function loadImg(el){ if(!el.src){ const source = el.dataset.src; el.src = source; } }
將判斷進入可視區域的函數與加載圖片的函數放入頁面函數,在頁面加載與滾動的時候調用函數性能
function checkImgs(){ const imgs = document.querySelectorAll('li img'); Array.from(imgs).forEach(el =>{ if (isInSight(el)){ loadImg(el); } }) } window.onload = function(){ checkImgs(); } document.onscroll = function () { checkImgs(); }
到這裏就完成了圖片懶加載,但會存在一些性能問題,好比:加載過的圖片不須要在遍歷了、兩次滾動時間間隔很短(抖動問題)。這些優化問題就不在這兒寫了,之後有時間再補上去。接下來會寫另外一個ES6實現圖片懶加載的API——「IntersectionObserver
」,這個API實現性能會更好。優化