Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

<b-img-lazy> with srcset #4348

Closed
amoralesdesign opened this issue Nov 6, 2019 · 4 comments · Fixed by #4350, mariazevedo88/hash-generator-js#17 or CloudsdaleGroup/AnimFM#3
Closed

<b-img-lazy> with srcset #4348

amoralesdesign opened this issue Nov 6, 2019 · 4 comments · Fixed by #4350, mariazevedo88/hash-generator-js#17 or CloudsdaleGroup/AnimFM#3

Comments

@amoralesdesign
Copy link

@amoralesdesign amoralesdesign commented Nov 6, 2019

not support srcset, if you add srcset value vuejs load all images without using lazyload

I tried to add it in the img-lazy.js code

export default {
  name: NAME,
  components: { BImg },
  props: {
    src: {
      type: String,
      default: null,
      required: true
    },
    srcset: {
      type: String,
      default: null,
    },
@tmorehouse

This comment has been minimized.

Copy link
Member

@tmorehouse tmorehouse commented Nov 6, 2019

srcset is currently not supported by <b-img-lazy>, as it would need to perform media queries to determine which image should be loaded when the image comes into view (although there may be ways around this), and would also require blank images (or placeholders) at the same dimensions as the srcset has (which are not always provided via the sizes attribute, so need to be inferred somehow, without loading the images to get their native aspect ratio).

Since b-img-lazy now uses IntersectionObserver to detect image visibility in the viewport, it also detects visibility of the CSS display (i.e. never loads the lazy image if the computed style is display: none i.e. via media queries, or Bootstrap responsive display utility classes such as d-md-none, d-lg-block etc.).

As a work around one could specify multiple <b-img-lazy> components with different responsive display values (i.e. classes), and ensure that all but one of the <b-img-lazy> components will have display: none set.

@tmorehouse

This comment has been minimized.

Copy link
Member

@tmorehouse tmorehouse commented Nov 6, 2019

One other thing to note is that IE 11 does not support srcset (norsizes) attribute on the <img> element, so src would always need to be set to ensure IE11 support. https://caniuse.com/#feat=srcset

The other issue to deal with is project relative asset URLs, which is easy for single image src attribute, but vue-loader may not know what to do with comma separated list of URLs in the srcset attribute/prop (https://vue-loader.vuejs.org/guide/asset-url.html#asset-url-handling)

@tmorehouse

This comment has been minimized.

Copy link
Member

@tmorehouse tmorehouse commented Nov 6, 2019

We might be able to get it to work, although one can only specify a single blank/placeholder image to load by default (which may or may not have the same expected aspect ratio as the final image chosen by the browser)

tmorehouse added a commit that referenced this issue Nov 8, 2019
…loses #4348) (#4350)
@tmorehouse

This comment has been minimized.

Copy link
Member

@tmorehouse tmorehouse commented Nov 13, 2019

BootstrapVue v2.1.0 has been released, which added support for srcset and sizes props..

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
2 participants
You can’t perform that action at this time.