/**
* 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);
-
-
Save xgqfrms-GitHub/4afa7b8af41c5060eedd926682627f74 to your computer and use it in GitHub Desktop.
lazy-loading.js
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]}`);
}
});
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
https://gist.github.com/search/quick?utf8=✓&q=fetch