search

madrilene / eleventy-excellent

Eleventy starter based on the workflow suggested by Andy Bell's buildexcellentwebsit.es.
https://eleventy-excellent.netlify.app/
Other
382 stars 69 forks source link

imagePlaceholder fallback doesn't work #29

Closed wargaluk closed 8 months ago

wargaluk commented 8 months ago

Hi!

I recently revised the code of my Eleventy-Excellent-based website and wanted to test whether it worked at all in older browsers, including Internet Explorer. I was surprised to discover that no images at all were displayed there. This appeared to be true for vanilla Eleventy Excellent as well, e.g., the Post with an image demo. I thought this was odd because the whole idea of the <picture>/srcset markup is that it contains a fallback <img> element that should serve the image in a traditional way to browsers that don't support newer features.

I looked into the imagePlaceholder shortcode responsible for generating the image markup, and I believe I found the culprit. The generated code inserts a 1px placeholder in the src attribute of the <img> and the location of the actual image in a data-src attribute. However, the custom data-src does nothing on its own, and older browsers diligently display the 1px .png. As far as I can tell based on various tutorials on the web, the data-src thing is used only in conjunction with libraries such as vanilla-lazyload or lazysizes, which provide lazy loading functionality to browsers that lack native support. Unfortunately, your app.js does not seem to have an equivalent capability. The effect is a fallback element that fails to work as a fallback, and no 'minimum viable experience' is provided.

I still haven't decided how to fix it in my own code yet, but I thought this was something you might want to know (even if support for older browsers isn't a priority for the starter).

Have a happy new year!

madrilene commented 8 months ago

This is the typical snippet I copied from Eleventy project to Eleventy project, and at some point it probably lost the right context. I have now changed it to use the src with the fallback image, images are now shown under IE.