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);

github quick js search

define("github/hotkey-map", ["delegated-events", "./hotkey", "./form", "./observe"], function(e, t, n, r) {
    function o(e) {
        return e && e.__esModule ? e : {
            "default": e
        }
    }
    function i() {
        return d = null,
        f = l
    }
    function a(e) {
        var t = void 0
          , n = void 0
          , r = e.getAttribute("data-hotkey").split(/\s*,\s*/)
          , o = [];
        for (t = 0,
        n = r.length; n > t; t++) {
            var i = r[t];
            o.push(i.split(/\s+/))
        }
        return o
    }
    function s(e) {
        var t = void 0
          , n = void 0
          , r = void 0
          , o = void 0
          , i = void 0
          , s = a(e)
          , u = []
          , c = function() {
            var i = s[r]
              , a = l;
            u.push(function() {
                var r = void 0
                  , s = void 0
                  , u = [];
                for (n = r = 0,
                s = i.length; s > r; n = ++r)
                    o = i[n],
                    n < i.length - 1 ? (t = a[o],
                    (!t || "nodeType"in t) && (a[o] = {}),
                    u.push(a = a[o])) : u.push(a[o] = e);
                return u
            }())
        };
        for (r = 0,
        i = s.length; i > r; r++)
            c();
        return u
    }
    function u() {
        l = f = {};
        var e = document.querySelectorAll("[data-hotkey]");
        return Array.from(e).map(function(e) {
            return s(e)
        })
    }
    var c = o(t)
      , l = {}
      , f = l
      , d = null;
    document.addEventListener("keydown", function(t) {
        if (!(t.target instanceof Node && n.isFormField(t.target))) {
            d && clearTimeout(d);
            var r = c["default"](t)
              , o = f[r];
            if (o) {
                if (!("nodeType"in o))
                    return f = o,
                    void (d = setTimeout(i, 1500));
                i(),
                e.fire(o, "hotkey:activate", {
                    originalEvent: t,
                    hotkey: r
                }) && (n.isFormField(o) ? o.focus() : o.click()),
                t.preventDefault()
            } else
                i()
        }
    }),
    r.observe("[data-hotkey]", {
        add: s,
        remove: u
    })
}),

<svg aria-hidden="true" class="octicon octicon-gist-secret" height="32" version="1.1" viewBox="0 0 14 16" width="28"><path fill-rule="evenodd" d="M8 10.5L9 14H5l1-3.5L5.25 9h3.5L8 10.5zM10 6H4L2 7h10l-2-1zM9 2L7 3 5 2 4 5h6L9 2zm4.03 7.75L10 9l1 2-2 3h3.22c.45 0 .86-.31.97-.75l.56-2.28c.14-.53-.19-1.08-.72-1.22zM4 9l-3.03.75c-.53.14-.86.69-.72 1.22l.56 2.28c.11.44.52.75.97.75H5l-2-3 1-2z"></path></svg>

https://gist.github.com/search/quick?utf8=✓&q=fetch

parsed json

json = response.json();

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)
});




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)
})
.catch(function(error) {
    console.log('parsing failed: ', error)
});

 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]}`);
    }
});