Vue and Airtable: Image loading issue with jQuery Lazy

Other Questions Airtable
1

Help needed: How can I make jQuery Lazy work with Airtable data in Vue?

I’m new to Vue and Airtable and I’m struggling to get jQuery Lazy to work properly. Right now all my images load at once when the page opens. I think I need to use ‘data-src’ instead of ‘:src’ but I’m not sure how.

Here’s what I’ve tried:

<img class="lazy" id="img1" :src="item.fields.Photo[0].thumbnails.large.url" alt="" v-if="item.fields.Photo">

This loads all images immediately. When I change it to:

<img class="lazy" id="img1" :data-src="item.fields.Photo[0].thumbnails.large.url" alt="" v-if="item.fields.Photo">

Nothing shows up at all. I’m pretty lost here. Any tips on how to make this work? Thanks!

2

maybe try triggering jQuery Lazy after the vue component mounts? i fixed this by calling $(‘.lazy’).Lazy() in the mounted hook using this.$nextTick().

also ensure the plugin loads correctly in your project. hope that helps!

3

I encountered a similar issue when integrating jQuery Lazy with Vue and Airtable. The problem likely stems from Vue’s reactive rendering conflicting with jQuery Lazy’s initialization.

A solution that worked for me was to use Vue’s v-lazy-load directive instead. It’s specifically designed for Vue and eliminates the need for jQuery Lazy altogether. You can install it via npm and then use it like this:

<img v-lazy-load="item.fields.Photo[0].thumbnails.large.url" alt="" v-if="item.fields.Photo">

This approach should seamlessly lazy load your Airtable images within the Vue ecosystem. Remember to import and register the directive in your component or main.js file. It’s a more Vue-friendly solution that avoids potential conflicts with jQuery.

4

As someone who’s worked extensively with Vue and Airtable, I can say that mixing jQuery plugins with Vue can be tricky. Instead of forcing jQuery Lazy to work, I’d recommend using a Vue-specific solution like vue-lazyload.

I’ve implemented this in several projects, and it’s much more straightforward. First, install it via npm:

npm install vue-lazyload

Then in your main.js:

import VueLazyload from ‘vue-lazyload’
Vue.use(VueLazyload)

Now you can use it in your template like this:

This approach integrates seamlessly with Vue’s reactivity system and works well with Airtable data. It’s also more performant than jQuery Lazy in my experience.

Remember to add a loading placeholder for a smoother user experience. You can do this by passing options when you initialize VueLazyload.