fix intersection on unloaded images (define other dimension)

This commit is contained in:
Tomáš Mládek 2021-01-11 19:21:39 +01:00
parent a7bd0f7b71
commit 3721067cca

View file

@ -13,10 +13,12 @@
<!--suppress RequiredAttributes -->
<img v-for="(file, idx) in definition.files.slice(1)"
:data-src="file"
:data-direction="definition.direction"
:style="{
top: `${Math.round(definition.top)}px`,
left: `${Math.round(definition.left) + (definition.width * (idx + 1) * directionSign)}px`,
width: `${Math.round(definition.width)}px`,
height: `${Math.round(definition.height)}px`,
}"
/>
</template>
@ -33,10 +35,12 @@
<!--suppress RequiredAttributes -->
<img v-for="(file, idx) in definition.files.slice(1)"
:data-src="file"
:data-direction="definition.direction"
:style="{
top: `${Math.round(definition.top) + (definition.height * (idx + 1) * directionSign)}px`,
left: `${Math.round(definition.left)}px`,
height: `${Math.round(definition.height)}px`,
width: `${Math.round(definition.width)}px`,
}"
/>
</template>
@ -75,6 +79,11 @@ export default defineComponent({
element.classList.add("visible");
if (!element.src) {
element.src = element.dataset.src!;
if (element.dataset.direction == "left" || element.dataset.direction == "right") {
element.style.height = "auto";
} else {
element.style.width = "auto";
}
element.onload = () => {
element.classList.add("loaded");
};