原生JS實現圖片懶加載之一:Element.getBoundingClientRect()
阿新 • • 發佈:2018-03-09
itl title get 有時 調用函數 HR intersect zh-cn ima
實際項目開放中,特別是電商項目,由於有大量的圖片加載必然會影響性能,所以實現圖片的懶加載是非常有必要的。
實現圖片懶加載的知識點
標簽的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>
Element.getBoundingClientRect()方法
rectObject = object.getBoundingClientRect();
返回值是一個 DOMRect 對象,這個對象是由該元素的 getClientRects()
方法返回的一組矩形的集合, 即:是與該元素相關的CSS 邊框集合 。DOMRect 對象包含了一組用於描述邊框的只讀屬性——left、top、right和bottom,單位為像素。除了 width 和 height 外的屬性都是相對於視口的左上角位置而言的。
通過這個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實現性能會更好。
原生JS實現圖片懶加載之一:Element.getBoundingClientRect()