sheppy/javascript-lazyload
1
0
Fork 0
mirror of https://github.com/FAUSheppy/javascript-lazyload synced 2025-12-07 12:51:35 +01:00
Code Issues Actions Packages Projects Releases Wiki Activity

2020 refactor

Browse Source
This commit is contained in:
Yannik Schmidt
2020-08-30 18:02:40 +02:00
parent 4bd3479a6d
commit d6157aa96e
1 changed files with 58 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files

65
lazyload.js
View File

@@ -1,16 +1,43 @@
/* determine which size of image to load */
function getSize(){
var trueRes = screen.width/window.devicePixelRatio
if(trueRes > 1920)
return '-640-480'
else if(trueRes <= 1920 && trueRes >= 1200)
return '-640x480'
else
return '-320x240'
}
/* check if browser is capable of webp */
function supportsWebp() {
return /Chrome/.test(navigator.userAgent) && /Google Inc/.test(navigator.vendor);
/* alternative to check for webP support */
//if (!self.createImageBitmap) return false;
//const webpData = 'data:image/webp;base64,UklGRh4AAABXRUJQVlA4TBEAAAAvAAAAAAfQ//73v/+BiOh/AAA=';
//return createImageBitmap(webpData).then(() => true, () => false);
}
/* cache */ /* cache */
var webP = supportsWebp()
var elements = null var elements = null
var counter = 0 var counter = 0
/* garantuee initall call evaluates to true */ /* garantuee initall call evaluates to true */
var viewbox_y = -Infinity var viewbox_y = -Infinity
IDENT = "realsrc"
/* function to load images */ /* function to load images */
function changeSrc(offset){ function changeSrc(offset){
/* check if there was a relevant change */ /* check if there was a relevant change */
var cur_viewbox = -document.getElementById("navbar").getBoundingClientRect() var cur_viewbox = -document.getElementById("navbar").getBoundingClientRect().y
if(cur_viewbox - viewbox_y < 100){ if(cur_viewbox - viewbox_y < 100){
//console.log("löl")
return; return;
} }
/* cache viewbox */ /* cache viewbox */
@@ -18,15 +45,30 @@ function changeSrc(offset){
/* cache */ /* cache */
if(elements == null){ if(elements == null){
elements = document.querySelectorAll("*[realsrc]"); elements = document.querySelectorAll("*[" + IDENT + "]");
} }
for (var i = counter; i < elements.length; i++) { for (var i = counter; i < elements.length; i++) {
var boundingClientRect = elements[i].getBoundingClientRect(); var boundingClientRect = elements[i].getBoundingClientRect();
if (elements[i].hasAttribute("realsrc") if (elements[i].hasAttribute(IDENT)
&& boundingClientRect.top < window.innerHeight + offset) { && boundingClientRect.top < window.innerHeight + offset) {
elements[i].style.backgroundImage = newSrc;
elements[i].removeAttribute("realsrc"); var newSrc = elements[i].getAttribute(IDENT)
/* remove url( ... ) */
newSrc = newSrc.substring(4,newSrc.length-1)
if(newSrc.indexOf(".jpg") > -1){
/* get correct size */
newSrc += getSize()
/* load webP if supported */
if(webP){
newSrc = newSrc + '.webp'
}
}
elements[i].setAttribute("src", newSrc);
elements[i].style.backgroundImage = 'url(' + newSrc +')';
elements[i].removeAttribute(IDENT);
}else{ }else{
/* DOM is parsed top down and images are inserted in that order too */ /* DOM is parsed top down and images are inserted in that order too */
/* meaing that once we reach pic that insnt in viewbox none following will be*/ /* meaing that once we reach pic that insnt in viewbox none following will be*/
@@ -36,17 +78,18 @@ function changeSrc(offset){
} }
/* if we got here we are done */ /* if we got here we are done */
counter = elements.length document.getElementById("main_scrollable").removeEventListener("scroll",refresh_handler);
} }
refresh_handler = function(e) { var refresh_handler = function(e) {
/* images directly in view first (offset 0)*/ /* images directly in view first (offset 0)*/
changeSrc(0) //changeSrc(0)
/* then load images almost in view */ /* then load images almost in view */
changeSrc(500) changeSrc(500)
}; };
/* add listeners */ /* add listeners */
window.addEventListener('scroll', refresh_handler); document.getElementById("main_scrollable").addEventListener('scroll', refresh_handler);
window.addEventListener('resize', refresh_handler); window.addEventListener('resize', refresh_handler);
window.addEventListener('load', refresh_handler); window.addEventListener('load', refresh_handler);
getSize()