search

hilongjw / vue-lazyload

A Vue.js plugin for lazyload your Image or Component in your application.
http://hilongjw.github.io/vue-lazyload/
MIT License
7.99k stars 865 forks source link

Support data-srcset - Pixel density descriptor #475

Closed serialine closed 3 years ago

serialine commented 3 years ago 
<!-- vue template -->
<img v-lazy="'img.png'" data-srcset="img.png 1x, img@2x.png 2x, img@3x.png 3x" />

<!-- actual rendered: DPR 1.0 -->
<img
  data-srcset="img.png 1x, img@2x.png 2x, img@3x.png 3x" data-src="img@3x.png"
  src="img.png"
  lazy="loaded"
/>

<!-- actual rendered: DPR 2.0 (>1.0) -->
<img
  data-srcset="img.png 1x, img@2x.png 2x, img@3x.png 3x"
  data-src="img@3x.png"
  src="img@2x.png"
  lazy="loaded"
  style="transform: scale(0.5); transform-origin: 0px 0px;"
/>

<!-- actual rendered: DPR 3.0 (>2.0) -->
<img
  data-srcset="img.png 1x, img@2x.png 2x, img@3x.png 3x"
  data-src="img@3x.png"
  src="img@3x.png"
  lazy="loaded"
  style="transform: scale(0.333333); transform-origin: 0px 0px;"
/>

support data-srcset Pixel density descriptor

fix: #210

serialine commented 3 years ago

close: adjust scale cannot identify css affected width

<style>
.full-width { width: 100% }
</style>

<template>
  <!-- width of this element is calculated by css class on purpose. -->
  <img v-lazy="'img.png'" data-srcset="img.png 1x, img@2x.png 2x, img@3x.png 3x" class="full-width" />
</template>
<!-- unexpected width: 100% + transform: scale 0.333333 -->
<img
  data-srcset="img.png 1x, img@2x.png 2x, img@3x.png 3x"
  data-src="img@3x.png"
  src="img@3x.png"
  lazy="loaded"
  class="full-width"
  style="transform: scale(0.333333); transform-origin: 0px 0px;"
/>