RetroSearch Browse

Home - News ( United States | United Kingdom | Italy | Germany ) - Football scores

Showing content from https://github.com/jambonn/vue-lazyload below:

jambonn/vue-lazyload: Vue module for lazy-loading images in your vue 3 applications.

Vue module for lazyloading images in your Vue 3 applications. This module is base on vue-lazyload. Vue 1.x or 2.x please use vue-lazyload. Some of goals of this project worth noting include:

Be lightweight, powerful and easy to use
Work on any image type
Add loading class while image is loading
Supports Vue 3

Vue.js 3.x

$ npm i @jambonn/vue-lazyload

$ yarn add @jambonn/vue-lazyload

CDN: https://unpkg.com/@jambonn/vue-lazyload/dist/vue-lazyload.umd.js

<script src="https://unpkg.com/@jambonn/vue-lazyload/dist/vue-lazyload.umd.js"></script>
<script>
  var AttributeBindingApp = {
    data() {
      return {
        message: 'Vue Lazyload'
      }
    }
  }
  var app = Vue.createApp(AttributeBindingApp)
  app.use(window['vue-lazyload'].default)
  app.mount('#bind-attribute')
  ...
</script>

main.js:

import { createApp } from 'vue'
import VueLazyload from '@jambonn/vue-lazyload'
import App from './App.vue'

const app = createApp(App)
app.use(VueLazyload)

// or with options
const loadimage = require('./assets/loading.gif')
const errorimage = require('./assets/error.gif')
app.use(VueLazyload, {
  preLoad: 1.3,
  error: errorimage,
  loading: loadimage,
  attempt: 1
})

app.mount('#app')

template:

<ul>
  <li v-for="img in list">
    <img v-lazy="img.src" >
  </li>
</ul>

use v-lazy-container work with raw HTML

<div v-lazy-container="{ selector: 'img' }">
  <img data-src="//domain.com/img1.jpg">
  <img data-src="//domain.com/img2.jpg">
  <img data-src="//domain.com/img3.jpg">  
</div>

custom error and loading placeholder image

<div v-lazy-container="{ selector: 'img', error: 'xxx.jpg', loading: 'xxx.jpg' }">
  <img data-src="//domain.com/img1.jpg">
  <img data-src="//domain.com/img2.jpg">
  <img data-src="//domain.com/img3.jpg">  
</div>

<div v-lazy-container="{ selector: 'img' }">
  <img data-src="//domain.com/img1.jpg" data-error="xxx.jpg">
  <img data-src="//domain.com/img2.jpg" data-loading="xxx.jpg">
  <img data-src="//domain.com/img3.jpg">  
</div>

key description default options preLoad proportion of pre-loading height 1.3 Number error src of the image upon load fail 'data-src' String loading src of the image while loading 'data-src' String attempt attempts count 3 Number listenEvents events that you want vue listen for ['scroll', 'wheel', 'mousewheel', 'resize', 'animationend', 'transitionend', 'touchmove'] Desired Listen Events adapter dynamically modify the attribute of element { } Element Adapter filter the image's listener filter { } Image listener filter lazyComponent lazyload component false Lazy Component dispatchEvent trigger the dom event false Boolean throttleWait throttle wait 200 Number observer use IntersectionObserver false Boolean observerOptions IntersectionObserver options { rootMargin: '0px', threshold: 0.1 } IntersectionObserver silent do not print debug info true Boolean

You can configure which events you want vue-lazyload by passing in an array of listener names.

const app = createApp(AttributeBindingApp)
app.use(VueLazyload, {
  preLoad: 1.3,
  error: 'dist/error.png',
  loading: 'dist/loading.gif',
  attempt: 1,
  // the default is ['scroll', 'wheel', 'mousewheel', 'resize', 'animationend', 'transitionend']
  listenEvents: [ 'scroll' ]
})

This is useful if you are having trouble with this plugin resetting itself to loading when you have certain animations and transitions taking place

dynamically modify the src of image

const app = createApp(AttributeBindingApp)
app.use(VueLazyload, {
    filter: {
      progressive (listener, options) {
          const isCDN = /qiniudn.com/
          if (isCDN.test(listener.src)) {
              listener.el.setAttribute('lazy-progressive', 'true')
              listener.loading = listener.src + '?imageView2/1/w/10/h/10'
          }
      },
      webp (listener, options) {
          if (!options.supportWebp) return
          const isCDN = /qiniudn.com/
          if (isCDN.test(listener.src)) {
              listener.src += '?imageView2/2/format/webp'
          }
      }
    }
})

const app = createApp(AttributeBindingApp)
app.use(VueLazyload, {
    adapter: {
        loaded ({ bindType, el, naturalHeight, naturalWidth, $parent, src, loading, error, Init }) {
            // do something here
            // example for call LoadedHandler
            LoadedHandler(el)
        },
        loading (listender, Init) {
            console.log('loading')
        },
        error (listender, Init) {
            console.log('error')
        }
    }
})

use Intersection Observer to to improve performance of a large number of nodes.

const app = createApp(AttributeBindingApp)
app.use(vueLazy, {
  // set observer to true
  observer: true,

  // optional
  observerOptions: {
    rootMargin: '0px',
    threshold: 0.1
  }
})

const app = createApp(AttributeBindingApp)
app.use(VueLazyload, {
  lazyComponent: true
});

<lazy-component @show="handler">
  <img class="mini-cover" :src="img.src" width="100%" height="400">
</lazy-component>

<script>
  export default {
    setup () {
      const handler = () => {
        console.log('this component is showing')
      }
      return { handler }
    }
  }
</script>

Use in list

<lazy-component v-for="(item, index) in list" :key="item.src" >
  <img class="mini-cover" :src="item.src" width="100%" height="400">
</lazy-component>

vue-lazyload will set this img element's src with imgUrl string

<template>
  <div">
     <img v-lazy="imgUrl"/>
     <div v-lazy:background-image="imgUrl"></div>

     <!-- with customer error and loading -->
     <img v-lazy="imgObj"/>
     <div v-lazy:background-image="imgObj"></div>

     <!-- Customer scrollable element -->
     <img v-lazy.container ="imgUrl"/>
     <div v-lazy:background-image.container="img"></div>

    <!-- srcset -->
    <img v-lazy="'img.400px.jpg'" data-srcset="img.400px.jpg 400w, img.800px.jpg 800w, img.1200px.jpg 1200w">
    <img v-lazy="imgUrl" :data-srcset="imgUrl' + '?size=400 400w, ' + imgUrl + ' ?size=800 800w, ' + imgUrl +'/1200.jpg 1200w'" />
  </div>
</template>

<script>
  import { ref, reactive } from 'vue'
  export default {
    setup () {
      const imgObj = reactive({
        src: 'http://xx.com/logo.png',
        error: 'http://xx.com/error.png',
        loading: 'http://xx.com/loading-spin.svg'
      })
      const imgUrl = ref('http://xx.com/logo.png') // String

      return { imgObj, imgUrl }
    }
  }
</script>

There are three states while img loading

loading loaded error

<img src="imgUrl" lazy="loading">
<img src="imgUrl" lazy="loaded">
<img src="imgUrl" lazy="error">

<style>
  img[lazy=loading] {
    /*your style here*/
  }
  img[lazy=error] {
    /*your style here*/
  }
  img[lazy=loaded] {
    /*your style here*/
  }
  /*
  or background-image
  */
  .yourclass[lazy=loading] {
    /*your style here*/
  }
  .yourclass[lazy=error] {
    /*your style here*/
  }
  .yourclass[lazy=loaded] {
    /*your style here*/
  }
</style>

import { getCurrentInstance, inject } from 'vue'
export default {
  setup() {
    const internalInstance = getCurrentInstance().appContext.config.globalProperties
    const LazyLoad = internalInstance.$Lazyload
    // or
    const Lazyload = inject('Lazyload')

    Lazyload.$on(event, callback)
    Lazyload.$off(event, callback)
    Lazyload.$once(event, callback)
  }
}

$on Listen for a custom events loading, loaded, error
$once Listen for a custom event, but only once. The listener will be removed once it triggers for the first time.
$off Remove event listener(s).

{string} event
{Function} callback

Lazyload.$on('loaded', function ({ bindType, el, naturalHeight, naturalWidth, $parent, src, loading, error }, formCache) {
  console.log(el, src)
})

{string} event
{Function} callback

Lazyload.$once('loaded', function ({ el, src }) {
  console.log(el, src)
})

If only the event is provided, remove all listeners for that event

{string} event
{Function} callback

import { getCurrentInstance, inject } from 'vue'
export default {
  setup() {
    const internalInstance = getCurrentInstance().appContext.config.globalProperties
    const LazyLoad = internalInstance.$Lazyload
    // or
    const Lazyload = inject('Lazyload')

    const handler = ({ el, src }, formCache) => {
      console.log(el, src)
    }
    Lazyload.$on('loaded', handler)
    Lazyload.$off('loaded', handler)
    Lazyload.$off('loaded')
  }
}

Lazyload.lazyLoadHandler

Manually trigger lazy loading position calculation

import { getCurrentInstance, inject } from 'vue'
export default {
  setup() {
    const internalInstance = getCurrentInstance().appContext.config.globalProperties
    const LazyLoad = internalInstance.$Lazyload
    // or
    const Lazyload = inject('Lazyload')

    Lazyload.lazyLoadHandler()
  }
}

import { getCurrentInstance, inject } from 'vue'
export default {
  setup() {
    const internalInstance = getCurrentInstance().appContext.config.globalProperties
    const LazyLoad = internalInstance.$Lazyload
    // or
    const Lazyload = inject('Lazyload')

    Lazyload.$on('loaded', function (listener) {
      console.table(Lazyload.performance())
    })
  }
}

Dynamic switching pictures

 <img v-lazy="lazyImg" :key="lazyImg.src">

The MIT License

RetroSearch is an open source project built by @garambo | Open a GitHub Issue

Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo

HTML: 3.2 | Encoding: UTF-8 | Version: 0.7.4