Lazy load images blogger

-
lazy loading blogger berguna untuk :
- Mempercepat laman web
- Meningkatkan rating pagespeed
HTML (Usage)
<img alt='' data-src='https://lh3.googleusercontent.com/proxy/FCTXDOBcEj5ojJZCa5wsRX4hG0C1qod8MXxYlCcvUGT7EGMROVrUqXFf0LAuxtvvRaFKPr3mn-yUl3dMZj_ygE--d2lPheO6CSUofHexbWd1LQ6NV4NbJCReDlMs=w72-h58-p-k-no-nu' src='data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAMAAAAoyzS7AAAAA1BMVEXz8/SVuXQoAAAACklEQVQI12NgAAAAAgAB4iG8MwAAAABJRU5ErkJggg=='/>
- src='data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAMAAAAoyzS7AAAAA1BMVEXz8/SVuXQoAAAACklEQVQI12NgAAAAAgAB4iG8MwAAAABJRU5ErkJggg==' : source gambar dengan resolusi paling rendah
- data-src='https://lh3.googleusercontent.com/proxy/FCTXDOBcEj5ojJZCa5wsRX4hG0C1qod8MXxYlCcvUGT7EGMROVrUqXFf0LAuxtvvRaFKPr3mn-yUl3dMZj_ygE--d2lPheO6CSUofHexbWd1LQ6NV4NbJCReDlMs=w72-h58-p-k-no-nu' : source gambar asli
JS (taruh diatas </body>)
FULL DEMO
<script> //<![CDATA[ const config = { rootMargin: '0px 0px 50px 0px', threshold: 0 }; const imgs = document.querySelectorAll('[data-src]'); if (typeof intersectionObserver != 'undefined') { // register the config object with an instance // of intersectionObserver let observer = new intersectionObserver(function (entries, self) { // iterate over each entry entries.forEach(entry => { // process just the images that are intersecting. // isIntersecting is a property exposed by the interface if (entry.isIntersecting) { // custom function that copies the path to the img // from data-src to src preloadImage(entry.target); // the image is now in place, stop watching self.unobserve(entry.target); } }); }, config); imgs.forEach(img => { observer.observe(img); }); } else { imgs.forEach(img => { preloadImage(img) }); } function preloadImage(e) { var a = e.getAttribute('src'), b = e.getAttribute('data-src'); if (b.trim() != ''){ e.src = b.trim(); } } ]]> </script>
See the Pen Pure javascript lazy load images by dimas lanjaka (@dimaslanjaka) on CodePen.
0 Response to "Lazy load images blogger"
Post a comment
Jangan Lupa Cek Box "Notify Me" agar tahu komentar kamu dibalas oleh saya.
If there are any posts that are missing, or error or anything else, please leave a comment for the article / post to be fixed.
Do not Forget Check Box "Notify Me" to know our comments replied by me.