@unlazy/vue
Version:
Vue lazy loading library for placeholder images
124 lines (123 loc) • 3.63 kB
JavaScript
import { Fragment, createElementBlock, createElementVNode, defineComponent, mergeProps, openBlock, ref, renderList, watchEffect } from "vue";
import { autoSizes, lazyLoad, triggerLoad } from "unlazy";
//#region \0rolldown/runtime.js
var __defProp = Object.defineProperty;
var __exportAll = (all, no_symbols) => {
let target = {};
for (var name in all) __defProp(target, name, {
get: all[name],
enumerable: true
});
if (!no_symbols) __defProp(target, Symbol.toStringTag, { value: "Module" });
return target;
};
//#endregion
//#region src/components/UnLazyImage.vue
const _hoisted_1 = { key: 0 };
const _hoisted_2 = [
"type",
"media",
"width",
"height",
"data-srcset",
"data-sizes"
];
const _hoisted_3 = [
"src",
"data-src",
"data-srcset",
"data-sizes",
"loading"
];
const _hoisted_4 = [
"src",
"data-src",
"data-srcset",
"data-sizes",
"loading"
];
const _sfc_main = /* @__PURE__ */ defineComponent({
inheritAttrs: false,
__name: "UnLazyImage",
props: {
src: {},
srcSet: {},
sources: {},
autoSizes: { type: Boolean },
blurhash: {},
thumbhash: {},
placeholderSrc: {},
placeholderSize: {},
preload: { type: Boolean },
loading: {}
},
emits: ["imageLoad", "imageError"],
setup(__props, { emit: __emit }) {
const props = __props;
const emit = __emit;
const target = ref();
watchEffect((onCleanup) => {
if (!target.value) return;
props.src;
props.srcSet;
props.sources;
if (props.preload) {
const cleanupSizes = props.autoSizes ? autoSizes(target.value, { updateOnResize: true }) : void 0;
const cleanupLoad = triggerLoad(target.value, {
onImageLoad: (image) => emit("imageLoad", image),
onImageError: (image, error) => emit("imageError", image, error)
});
onCleanup(() => {
cleanupSizes?.();
cleanupLoad();
});
return;
}
onCleanup(lazyLoad(target.value, {
hash: props.thumbhash || props.blurhash,
hashType: props.thumbhash ? "thumbhash" : "blurhash",
placeholderSize: props.placeholderSize,
updateSizesOnResize: props.autoSizes,
onImageLoad: (image) => emit("imageLoad", image),
onImageError: (image, error) => emit("imageError", image, error)
}));
});
return (_ctx, _cache) => {
return __props.sources?.length ? (openBlock(), createElementBlock("picture", _hoisted_1, [(openBlock(true), createElementBlock(Fragment, null, renderList(__props.sources, (source, index) => {
return openBlock(), createElementBlock("source", {
key: index,
type: source.type,
media: source.media,
width: source.width,
height: source.height,
"data-srcset": source.srcSet,
"data-sizes": source.sizes || (__props.autoSizes ? "auto" : void 0)
}, null, 8, _hoisted_2);
}), 128)), createElementVNode("img", mergeProps({
ref_key: "target",
ref: target
}, _ctx.$attrs, {
src: __props.placeholderSrc,
"data-src": __props.src,
"data-srcset": __props.srcSet,
"data-sizes": __props.autoSizes ? "auto" : void 0,
loading: __props.loading || "lazy"
}), null, 16, _hoisted_3)])) : (openBlock(), createElementBlock("img", mergeProps({
key: 1,
ref_key: "target",
ref: target
}, _ctx.$attrs, {
src: __props.placeholderSrc,
"data-src": __props.src,
"data-srcset": __props.srcSet,
"data-sizes": __props.autoSizes ? "auto" : void 0,
loading: __props.loading || "lazy"
}), null, 16, _hoisted_4));
};
}
});
//#endregion
//#region src/components/index.ts
var components_exports = /* @__PURE__ */ __exportAll({ UnLazyImage: () => _sfc_main });
//#endregion
export { _sfc_main as n, components_exports as t };