Skip to content

Instantly share code, notes, and snippets.

View Alfrex92's full-sized avatar

Alfred Alfrex92

View GitHub Profile
function* findLazyElements() {
const blocks = [
...Array.from(document.querySelectorAll("noscript.lazyload")).map(lazy =>
parseHTML(lazy.innerText).map(elem => ({ elem, parent: lazy.parentNode }))
),
...Array.from(document.querySelectorAll("template.lazyload")).map(lazy =>
Array.from(lazy.content.cloneNode(true).children)
.map(elem => ({ elem, parent: lazy.parentNode }))
.map(item => {
if (item.elem.tagName !== "SCRIPT") return item;
@Alfrex92
Alfrex92 / .scss
Last active March 13, 2019 16:36
Responsive images
.wrapper {
position: relative;
overflow: hidden;
padding-bottom: $mainRatio;
background-size: cover;
img {
position: absolute;
left: -10000%;
right: -10000%;
top: -10000%;
const numbers = [1, 2, 3, 4, 5]
console.time('Imperative')
function squared(numbers) {
let arr = []
for ( let i = 0; i < numbers.length; i++ ) {
arr.push( numbers[i] * numbers[i] )
}
return console.log(arr)
@Alfrex92
Alfrex92 / .js
Last active November 30, 2018 11:19
Lazy loading Intersection Observer with Vanilla JS
document.addEventListener("DOMContentLoaded", () => {
const lazyImages = [...qall(".lazy-load")]
if (!lazyImages) return;
if ("IntersectionObserver" in window) {
let lazyImageObserver =
new IntersectionObserver((entries, observer) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
let lazyImage = entry.target;