ailingangel / web-performance Goto Github PK

function loadImage(url, callback) {    
    var img = new Image(); // 创建一个Image对象，实现图片的预下载    
    img.onload = function(){
        img.onload = null; // 解决闭包的问题
        callback(img);
    }
    img.src = url;
}

// 放在onload事件回调里是为了不方案html的下载，而是等到html文件下载完成再开始预加载
window.onload = function() {
    let style = document.getElementById("preload-01").style
    style.display = 'none';
    style.background = "url(http://domain.tld/image-01.png) no-repeat";
}

window.onload = function() {
    setTimeout(function() {
        // XHR to request a JS and a CSS  
        var xhr = new XMLHttpRequest();
        xhr.open('GET', 'http://domain.tld/preload.js');
        xhr.send('');
        xhr = new XMLHttpRequest();
        xhr.open('GET', 'http://domain.tld/preload.css');
        xhr.send('');
        // preload image  
        new Image().src = "http://domain.tld/preload.png";
    }, 1000);
};

function loadImg(el){
  let url = el.dataset.url;
  el.src = url;
}

function isInViewPort(element) {
    let windowHeight = window.innerHeight || document.documentElement.clientHeight;
    let windowWidth = window.innerWidth || document.documentElement.clientWidth;
    let rect = element.getBoundingClientRect();
    if (rect.top > 0 && (rect.top + rect.height) <= windowHeight && rect.left > 0 && ((rect.left + rect.width) < windowWidth)) {
        return true;
    }
    return false;
}

window.addEventListener('wheel', throttle(function() {
    let imgs = document.getElementsByTagName('img');
    imgs.forEach(img => {
        if (isInViewPort(img) && !img.hasLoaded) {
            loadImg(img);
            img.onload = img.onerror = () => img.hasLoaded = true;
        }
    })
}, 500));

let imgs = document.getElementsByTagName('img');
var ob = new IntersectionObserver(function(entries) {
  entries.forEach(entry=>{
    let el = entry.target;
    if(entry.intersectionRatio > 0) {
      loadImg(el);
      entry.onload = entry.onerror = ()=>ob.unobserve(el);
    }
  });
});

Array.from(imgs).forEach(img=>ob.observe(img))