aFarkas / lazysizes

High performance and SEO friendly lazy loader for images (responsive and normal), iframes and more, that detects any visibility changes triggered through user interaction, CSS or JavaScript without configuration.
MIT License
17.51k stars 1.73k forks source link

blanks (spaces) before attribute value when adding class to image #905

Open noRiddle opened 3 years ago

noRiddle commented 3 years ago

Dear aFarkas, dear community. First of all many thanks, aFarkas, for sharing your work here.

I recognized blanks before the img classes when lazyloaded and/or ls-is-cached are added. Browser do tolerate this until now but we never know if this will stay like that in future. The HTML5-specs of the W3C don't allow blanks before the attribute value, as far as I understand it. https://dev.w3.org/html5/spec-LC/syntax.html#unquoted

I understand that for compatibilty reasons with annoying InternetExplorer you can't use classList. I would recommend to do the following to avoid the blanks before the class values (explained with the minified version): Instead of e.setAttribute("class",(e[$]("class")||"").trim()+" "+t)

to use this e.className += (e[$]("class") != "" ? (" " + t) : t)

and instead of e.setAttribute("class",(e[$]("class")||"").replace(a," "))

to use this e.setAttribute("class",(e[$]("class")||"").replace(a,""))

We tested these changes successfully in our community for "modified eCommerce Shopsoftware" where we use your script.

What do you think ?

I posted this as "feature request" because it might be disputable to consider the decribed behaviour a bug.

Regards, noRiddle

noRiddle commented 3 years ago

Allow me to push this up again.

Regards, noRiddle

noRiddle commented 3 years ago

What is wrong with my plea, if I may call it so ? Or is there no interest any more to improve the script ?

Regards, noRiddle

aFarkas commented 3 years ago

I just have much to do. You can create a PR if you want. Please use setAttribute className is also not available on all elements in IE.

There are no comp issues with browsers with existing solutions.