Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

add mutationObserver #1

Open
wants to merge 10 commits into
base: master
Choose a base branch
from
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions .gitignore
Original file line number Diff line number Diff line change
@@ -1 +1,2 @@
.history/
node_modules
19 changes: 19 additions & 0 deletions demo/index.html
Original file line number Diff line number Diff line change
Expand Up @@ -43,10 +43,29 @@
type="text/javascript"
src="../loading-attribute-polyfill.min.js"
></script>
<script>
function clickAddImage() {
var str = '<noscript class="loading-lazy"></noscript>';
var child = document.createElement('div');
child.innerHTML = str;
child = child.firstChild;
var imageElement = document.createElement('img');
imageElement.setAttribute('src', 'https://mfranzke.github.io/loading-attribute-polyfill/demo/img/img-src-loadinglazy.250x150.png');
imageElement.setAttribute('loading','lazy');
imageElement.setAttribute('alt','..');
imageElement.setAttribute('width','250');
imageElement.setAttribute('height','150');
child.appendChild(imageElement);
child.appendChild(imageElement.cloneNode(true));
child.appendChild(imageElement.cloneNode(true));
document.getElementsByTagName('header')[0].insertBefore(child, document.getElementsByTagName('header')[0].firstChild);
}
</script>
</head>
<body>
<p>The sample images embedded into this document are including textual information on their embedding technique, like the HTML tag, attributes and pixel density to show you that the correct image has been loaded.</p>
<header>
<button onclick="clickAddImage()">Add image</button>
<!-- Regular images with loading="lazy" attribute provided for testing -->
<noscript class="loading-lazy">
<img
Expand Down
40 changes: 39 additions & 1 deletion loading-attribute-polyfill.js
Original file line number Diff line number Diff line change
Expand Up @@ -214,6 +214,7 @@
}

// Remove the empty element - not using .remove() here for IE11 compatibility
// eslint-disable-next-line unicorn/prefer-node-remove
OgNellis marked this conversation as resolved.
Show resolved Hide resolved
noScriptTag.parentNode.removeChild(noScriptTag); // Preferred .removeChild over .remove here for IE
}

Expand All @@ -230,19 +231,56 @@
onPrinting();
}

function startMutationObserver() {
var observerTarget = document.querySelector('body');
var observerСonfig = {
childList: true,
subtree: true
};
var observerCallback = function(mutationsList) {
var isReinitNeeded = mutationsList.some(function(mutation) {
var newImages = false;
if (mutation.type === 'childList') {
newImages = Array.prototype.some.call(mutation.addedNodes, function(
addedNode
) {
var thisNodeIsLazyLoad =
addedNode.tagName === 'NOSCRIPT' &&
addedNode.className === 'loading-lazy';
var lazyLoadNodeIsInsideThisNode =
addedNode.querySelector &&
addedNode.querySelector('noscript.loading-lazy');
return thisNodeIsLazyLoad || lazyLoadNodeIsInsideThisNode;
});
}

return newImages;
});
if (isReinitNeeded) {
prepareElements();
}
};

var mutationObserver = new MutationObserver(observerCallback);
mutationObserver.observe(observerTarget, observerСonfig);
}

// If the page has loaded already, run setup - if it hasn't, run as soon as it has.
// Use requestAnimationFrame as this will propably cause repaints
if (/comp|inter/.test(document.readyState)) {
rAFWrapper(prepareElements);
rAFWrapper(startMutationObserver);
} else if ('addEventListener' in document) {
document.addEventListener('DOMContentLoaded', function() {
rAFWrapper(prepareElements);
rAFWrapper(startMutationObserver);
});
} else {
document.attachEvent('onreadystatechange', function() {
if (document.readyState === 'complete') {
prepareElements();
startMutationObserver();
}
});
}
}('loading-lazy', '256px 0px'));
})('loading-lazy', '256px 0px');
2 changes: 1 addition & 1 deletion loading-attribute-polyfill.min.js

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.