All Projects → lzxb → vue-lazy-load-img

lzxb / vue-lazy-load-img

Licence: other
vue版本的lazy-load-img图片懒加载插件

Programming Languages

javascript
184084 projects - #8 most used programming language
Vue
7211 projects

Projects that are alternatives of or similar to vue-lazy-load-img

vue-viewload
vue图片懒加载lazyload,依赖vue2.0以上版本。支持图片或者其他资源进入可视区域后加载。
Stars: ✭ 77 (+148.39%)
Mutual labels:  vue2, vue-lazyload
vue-tiny-lazyload-img
🐌 A small size Vue.js directive for lazy loading images using IntersectionObserver API
Stars: ✭ 91 (+193.55%)
Mutual labels:  vue2, lazy-load-img
vue-tinymce-editor
This a component provides use of tinymce for vue developers
Stars: ✭ 221 (+612.9%)
Mutual labels:  vue2
message
基于 Vue2.x 的消息提示组件。Vue-based message component
Stars: ✭ 26 (-16.13%)
Mutual labels:  vue2
vue2-element
基于vue2 + vue-router2 + element-ui + vuex2 + fetch + webpack2 企业级后台管理系统最佳实践
Stars: ✭ 115 (+270.97%)
Mutual labels:  vue2
vue-china-map
vue+vuex+axios+echarts画一个动态更新的中国地图
Stars: ✭ 64 (+106.45%)
Mutual labels:  vue2
vue-collapse
A simple collapse component for Vue.js
Stars: ✭ 34 (+9.68%)
Mutual labels:  vue2
vue-input-autowidth
A Vue.js directive that automatically resizes an input's width to fit its contents.
Stars: ✭ 94 (+203.23%)
Mutual labels:  vue2
vue-active-swiper
🌴 A Mobile-oriented、No dependencies、Lightweight Swiper component for Vue
Stars: ✭ 33 (+6.45%)
Mutual labels:  vue2
vue-add-to-calendar
A Vue.js component that provides "Add to Calendar" functionality, works with Vue 2.X
Stars: ✭ 133 (+329.03%)
Mutual labels:  vue2
vue-analytics-facebook-pixel
A small wrapper around Facebook Pixel API
Stars: ✭ 23 (-25.81%)
Mutual labels:  vue2
vue-drr
A Vue2 component for draggable, resizable, rotatable elements
Stars: ✭ 34 (+9.68%)
Mutual labels:  vue2
vue-insta-stories
Vue 2 & 3 library for Instagram like stories.
Stars: ✭ 45 (+45.16%)
Mutual labels:  vue2
vue-ssr-template
A full-featured Webpack + vue-loader setup with hot reload, linting, testing & css extraction.. (Thanks for vue-hackernews-2.0)
Stars: ✭ 18 (-41.94%)
Mutual labels:  vue2
generator-vue-plugin
Yeoman generator generating vue plugin 🚀
Stars: ✭ 29 (-6.45%)
Mutual labels:  vue2
vue-mxgraph-samples
在 vue2 中使用 mxgraph 的一些用例 / used mxgraph in vue2
Stars: ✭ 16 (-48.39%)
Mutual labels:  vue2
vue-editor
This is a powerful and based on the 'Vue' Markdown editor.😂😂
Stars: ✭ 31 (+0%)
Mutual labels:  vue2
plugin-ceres
This is the official Ceres plugin developed by plentymarkets. Ceres is the default template plugin for plentymarkets 7 online stores.
Stars: ✭ 43 (+38.71%)
Mutual labels:  vue2
vue-on-click-outside
vue mixin/directive that does something when you click outside a container
Stars: ✭ 32 (+3.23%)
Mutual labels:  vue2
vuejs2-wysiwyg
jQuery Summernote WYSIWYG Editor implementation for REST based single page applications that run on vue.js 2.0.
Stars: ✭ 15 (-51.61%)
Mutual labels:  vue2

关于

本插件基于lazy-load-img的vue版本实现,请到lazy-load-img查看文档

开发

npm install 
npm run dev

使用

  • 支持模块化加载和浏览器中直接引入使用
  • npm install --save-dev lazy-load-img vue-lazy-load-img
import Vue from 'vue'
import VueLazyLoadImg from 'vue-lazy-load-img'

Vue.use(VueLazyLoadImg)
<vue-lazy-load-img 
    mode="diy"
    :time="300"
    :done="true"
    :position="{ top: 0, right: 0, bottom: 0, left: 0 }"
    :diy="{ backgroundSize: 'cover', backgroundRepeat: 'no-repeat', backgroundPosition: 'center center' }"
    @before="before" 
    @success="success" 
    @error="error">
    <img src="./images/default.png" data-src="./images/test.png" alt="">
</vue-lazy-load-img>
Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].