封裝的圖片懶加載js

function filterDom(selector) {
    return Array.from(document.querySelectorAll(selector));
}
//事件觀察者
var observer = new IntersectionObserver(observerCall,{
    root: null,
    rootMargin : '0px 0px 20px 0px',
    threshold:[0, 1]
});
function observerCall(changes) {
    changes.forEach(function(change) {
        setTimeout(function(){
            if(change.intersectionRatio > 0){
                var container = change.target;
                var dataSrc = container.getAttribute('data-src');
                container.setAttribute('src', dataSrc)
                observer.unobserve(container);
            }

        }, 100);
    });
}
//過濾元素
filterDom('.lazy-loaded').forEach(function (item) {
    observer.observe(item);
});

 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章