lazy-loading.js

lazy-loading.js.md

lazy-loading.js

    
    
/**
 * xgqfrms
 * lazy-loading.js
 * 2017-06-09
 */


/*

1px size placeholder.png

cdn

<img src="placeholder.png" class="lazy" data-src="https://cdn.xgqfrms.xyz/statics/images/lagersizeimage.jpg" width="240" height="152">


base64

<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" class="lazy" data-src="https://cdn.xgqfrms.xyz/statics/images/lagersizeimage.jpg" width="240" height="152


placeholder.png === base64 image



*/



!function(window){
    let $q = (q, res) => {
            if (document.querySelectorAll) {
                res = document.querySelectorAll(q);
            } else {
                let d = document, 
                a = d.styleSheets[0] || d.createStyleSheet();
                a.addRule(q,'f:b');
                for(let l = d.all, b=0, c=[]; b < l.length; b++){
                    l[b].currentStyle.f && c.push(l[b]);
                }
                a.removeRule(0);
                res = c;
            }
            return res;
        },
        addEventListener = (evt, fn) => {
            window.addEventListener
            ?
            this.addEventListener(evt, fn, false)
            :
            (window.attachEvent) 
            ? 
            this.attachEvent('on' + evt, fn)
            :
            this['on' + evt] = fn;
        },
         _has = (obj, key) => {
            return Object.prototype.hasOwnProperty.call(obj, key);
        },
        loadImage = (el, fn) => {
            let img = new Image(),
                src = el.getAttribute('data-src');
            img.onload = () => {
                if (!! el.parent){
                    el.parent.replaceChild(img, el);
                }
                else{
                    el.src = src;
                }
                fn ? fn() : null;
            }
            img.src = src;
        },
        elementInViewport = (el) => {
            let rect = el.getBoundingClientRect();
            return (
                rect.top >= 0 
                && 
                rect.left >= 0 
                && 
                rect.top <= (window.innerHeight || document.documentElement.clientHeight)
            );
        };
    let images = new Array(),
        query = $q('img.lazy'),
        processScroll = () => {
            for (let i = 0; i < images.length; i++) {
                if (elementInViewport(images[i])) {
                    loadImage(images[i], () => {
                        images.splice(i, i);
                    });
                }
            }
        };
        // Array.prototype.slice.call is not callable under our lovely IE8 
        for (let i = 0; i < query.length; i++) {
            images.push(query[i]);
        };
    processScroll();
    addEventListener('scroll', processScroll);
}(this);

 fetch(`https://api.github.com/users/xgqfrms/repos`)
.then(function(response) {
    let json = response.json();
    console.log(`response = ${json}`);
    return json;
})
.then(function(json) {
    console.log('parsed json: ', json);
    console.log('parsed json: ', json[0]);
    console.log('parsed json: ', json[1].name);
});

 fetch(`https://api.github.com/users/xgqfrms/repos`)
.then(function(response) {
    let json = response.json();
    console.log(`response = ${json}`);
    return json;
})
.then(function(json) {
    console.log('parsed json: ', json);
    console.log('parsed json: ', json[0]);
    console.log('parsed json: ', json[1].name);
});



 fetch(`https://api.github.com/users/xgqfrms/repos`)
.then(function(response) {
    let json = response.json();
    console.log(`response = ${json}`);
    return json;
})
.then(function(json) {
    console.log('parsed json: ', json);
    console.log('parsed json: ', json[0].owner);
    console.log('parsed json: ', json[1].name);
});

fetch(`https://api.github.com/users/xgqfrms/repos`, {
    method: 'get',
    headers: {
        'Accept': 'application/json',
        'Content-Type': 'application/json'
    }
})
.then(function(response) {
    return response.json();
    // json() ???
})
.then(function(json) {
    console.log('parsed json: ', json);
    console.log('parsed json: ', json[0]);
    console.log('parsed json: ', json[1].name);
})
.catch(function(error) {
    console.log('parsing failed: ', error);
});

let username = `xgqfrms-GitHub`;
    repo = `Node-CLI-Tools/commits`;

fetch(`https://api.github.com/users/${username}/${repo}`,{
    data: {
        client_id: '08ecc2f68d922f18800e',
        client_secret: '5846d428b5340812b76c9637eceaee979340b922'
    }
})
.then((response) => response.json())
.then((json)=> {
    console.log(`json = ${json}`);
    return repos = json;
})
.then((repos)=>{
    console.log(`repos = ${repos}`);
    console.log(`repos = ${repos.length}`);
    console.log(`repos$ 0  = ${repos[0]}`);
    console.log(`repos$ 1  = ${repos[1]}`);
    for (let i = 0; i < repos.length; i++) {
        console.log(`repos${i}  = ${repos[i]}`);
    }
});




let username = `xgqfrms-GitHub`;

fetch(`https://api.github.com/users/${username}/repos`,{
    data: {
        client_id: '08ecc2f68d922f18800e',
        client_secret: '5846d428b5340812b76c9637eceaee979340b922'
    }
})
.then((response) => response.json())
.then((json)=> {
    console.log(`json = ${json}`);
    return repos = json;
})
.then((repos)=>{
    console.log(`repos = ${repos}`);
    console.log(`repos = ${repos.length}`);
    console.log(`repos$ 0  = ${repos[0]}`);
    console.log(`repos$ 1  = ${repos[1]}`);
    for (let i = 0; i < repos.length; i++) {
        console.log(`repos${i}  = ${repos[i]}`);
    }
});