monoeq/monoimage

Context aware lazy image nanocomponent

monoimage's Issues

single element

actually realized there's a slight issue with hacking the img element as a placeholder. If the element is set to expand to it's parent a grey border is applied to the element. Might be a way to solve this, opening issue here for time being. Might need to revert to wrapping element in a div

pros/cons of background-image vs img element

With background-image you lose out on accessibility / alt tags... any cons of switching to an img element (esp. since monocontextual makes sizing easy)?

noscript support?

Would be nice to add a noscript element with the image. This would also benefit scrapers that don't run JS...

TypeError: undefined is not a constructor (evaluating 'new window.IntersectionObserver(handler, opts)')

I get this error only with Safari 12.0.1, the page in Chrome and Firefox works fine. It's line 25 of index.js.

This is how I build the image

${state.cache(MonoImage, post.files[0].filename).render({
      sizes: { 600: post.files[0].url },
      dimensions: { ratio: 100 }
    }, {
      inline: true,
    })
}

More context here. I could possibly be doing something wrong?

loaded callback

was discussing with @jondashkyle that for convenience might be good to be able to pass an image loaded callback. Could look something like:

var element = myImage.render(imagedata, {}, el => {
  console.log(`${el} has loaded`)
})

cant rerender on an unmounted dom node

Just dropping this here for reference, will be looking into. There's a case where rerender is triggered before dom node is mounted (classic nanocomponent bug).

Load higher resolution image than parent div

Hi!

Is there a way to make monoimage always load higher resolution image than its parent div's width? Perhaps it's doing that and I am missing something but the following occurs.

Case scenario:
I have two images: 1200px and 1800px wide. Around 1200px viewport width I re-render the view and it loads the 1800px image. But this works only on a retina device. On a non-retina it loads the 1200px image again which results in a blurry image on higher viewport widths. I want images to be extra sharp even if on the costs of loading time.

The above numbers are arbitrary at the moment but it's just to illustrate the symptoms.
Maybe this has an obvious solution but appreciate any help.

Perhaps I need to cover more resolutions and 1200-1800px is too much of a gap?

Is the following lines that I should adapt to my needs?

// limit ratio to 1.5x (full 2x is overkill)
this.deviceRatio = (typeof window !== 'undefined' && window.devicePixelRatio > 1) ? 1.5 : 1

Thank you!