Research
Security News
Malicious npm Package Targets Solana Developers and Hijacks Funds
A malicious npm package targets Solana developers, rerouting funds in 2% of transactions to a hardcoded address.
vue-lazyload
Advanced tools
Vue module for lazyloading images in your applications. Some of goals of this project worth noting include:
1.x
or 2.x
$ npm i vue-lazyload -S
$ yarn add vue-lazyload
CDN: https://unpkg.com/vue-lazyload/vue-lazyload.js
<script src="https://unpkg.com/vue-lazyload/vue-lazyload.js"></script>
<script>
Vue.use(VueLazyload)
...
</script>
main.js:
import Vue from 'vue'
import App from './App.vue'
import VueLazyload from 'vue-lazyload'
Vue.use(VueLazyload)
// or with options
const loadimage = require('./assets/loading.gif')
const errorimage = require('./assets/error.gif')
Vue.use(VueLazyload, {
preLoad: 1.3,
error: errorimage,
loading: loadimage,
attempt: 1
})
new Vue({
el: 'body',
components: {
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.
Vue.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
Vue.use(vueLazy, {
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'
}
}
}
})
Vue.use(vueLazy, {
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.
Vue.use(vueLazy, {
// set observer to true
observer: true,
// optional
observerOptions: {
rootMargin: '0px',
threshold: 0.1
}
})
Vue.use(VueLazyload, {
lazyComponent: true
});
<lazy-component @show="handler">
<img class="mini-cover" :src="img.src" width="100%" height="400">
</lazy-component>
<script>
{
...
methods: {
handler (component) {
console.log('this component is showing')
}
}
}
</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
<script>
export default {
data () {
return {
imgObj: {
src: 'http://xx.com/logo.png',
error: 'http://xx.com/error.png',
loading: 'http://xx.com/loading-spin.svg'
},
imgUrl: 'http://xx.com/logo.png' // String
}
}
}
</script>
<template>
<div ref="container">
<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>
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>
vm.$Lazyload.$on(event, callback)
vm.$Lazyload.$off(event, callback)
vm.$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).vm.$Lazyload.$on
{string} event
{Function} callback
vm.$Lazyload.$on('loaded', function ({ bindType, el, naturalHeight, naturalWidth, $parent, src, loading, error }, formCache) {
console.log(el, src)
})
vm.$Lazyload.$once
{string} event
{Function} callback
vm.$Lazyload.$once('loaded', function ({ el, src }) {
console.log(el, src)
})
vm.$Lazyload.$off
If only the event is provided, remove all listeners for that event
{string} event
{Function} callback
function handler ({ el, src }, formCache) {
console.log(el, src)
}
vm.$Lazyload.$on('loaded', handler)
vm.$Lazyload.$off('loaded', handler)
vm.$Lazyload.$off('loaded')
vm.$Lazyload.lazyLoadHandler
Manually trigger lazy loading position calculation
this.$Lazyload.lazyLoadHandler()
this.$Lazyload.$on('loaded', function (listener) {
console.table(this.$Lazyload.performance())
})
<img v-lazy="lazyImg" :key="lazyImg.src">
FAQs
Vue module for lazy-loading images in your vue.js applications.
The npm package vue-lazyload receives a total of 55,137 weekly downloads. As such, vue-lazyload popularity was classified as popular.
We found that vue-lazyload demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 2 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Research
Security News
A malicious npm package targets Solana developers, rerouting funds in 2% of transactions to a hardcoded address.
Security News
Research
Socket researchers have discovered malicious npm packages targeting crypto developers, stealing credentials and wallet data using spyware delivered through typosquats of popular cryptographic libraries.
Security News
Socket's package search now displays weekly downloads for npm packages, helping developers quickly assess popularity and make more informed decisions.