javascript - Infinite loading of skeleton loaders with onload@load event - Stack Overflow

admin管理员组

文章数量:1410717

I have an issue where the image skeleton loader keeps loading infinitely when using the @load event in Quasar.

const imgLoaded = ref({});

// template
<q-skeleton v-if="!imgLoaded[img?.image_url]"></q-skeleton>

<q-img @load="(url) => imgLoaded[url] = true" :src="img?.image_url" />

The Quasar docs say that @load event is 'Emitted when image has been loaded by the browser. @param src - URL of image that has been loaded'. After the handler sets imgLoaded[url] to true, the skeleton should stop showing and the image should be displayed. However, the skeleton keeps loading infinitely.

The same thing is happening with the onload. Now when I need the image url for img.src, I take it directly from the store:

// template
<q-skeleton v-if="!imgLoaded[img?.image_url]">

// script
const imgLoaded = ref({});

const onImgLoad = (url) => {
    imgLoaded.value[url] = true;
};

onMounted(() => {
    if (storeProducts.featuredProducts && storeProducts.featuredProducts.length) {
        storeProducts.featuredProducts.forEach((product) => {
            const img = new Image();
            img.onload = () => onImgLoad(product?.image_url);
            img.src = product?.image_url;
        });
    }
});

However, this approach also causes the skeleton loader to load infinitely.

I've made a reproduction: .vue

Here, none of the imgLoaded[img.image] is set to true when the image is loaded. Besides, imgLoaded.value is initially {} instead of having each of the object properties set to false.

I'm looking for a possible solution.

本文标签： javascriptInfinite loading of skeleton loaders with onloadload eventStack Overflow