v-lazy-img - simplistic vue.js directive for image lazy loading

  •        107

v-lazy-img adds the directives v-lazy-load and v-lazy-load-bg. The latter changes the background image (css background-image) instead of the src-attribute.

https://github.com/nkoehring/v-lazy-img#readme

Tags
Implementation
License
Platform

   




Related Projects

v-img

  •    Vue

v-img is a plugin for Vue.js that allows you to show images in full-screen gallery by adding only one directive to the <img> tag. *in this snippet all settings has its default value. No need to specify them unless you want to change default behavior. Unfortunately if you used CDN way to include plugin you can't set up these options, but still can set them up inline.

vue-progressive-image - Vue progressive image loading plugin

  •    Javascript

To be able to immediately show some feedback to the user, it is possible to pass a placeholder image, which could be also 1% the size of the main image: it will be blurred so you can go crazy with optimizations here. The progressive-background has a "content" slot, which can hold content that needs to be rendered over the background image and also can hold a preloader. This slot has one property called "visible" that tells you when, for example, a preloader needs to be visible or not.

yall.js - A fast, flexible, and small image lazy loader!

  •    Javascript

yall.js is a featured-packed lazy loading script for <img>, <picture>, <video> and <iframe> elements. It works in all modern browsers including IE11. It uses Intersection Observer where available, but falls back to scroll, touchmove, resize, and orientationchange events where necessary. It can also monitor the DOM for changes using Mutation Observer to lazy load image elements that have been appended to the DOM after initial page render, which may be desirable for single page applications. It can also (optionally) optimize use of browser idle time using requestIdleCallback. To optimize decoding of <img> lazy loading for simple src and srcset use cases, yall.js uses Image.decode where available to decode images asynchronously before adding them to the DOM.

v-viewer - Image viewer component for vue, supports rotation, scale, zoom and so on, based on viewer

  •    Javascript

To use v-viewer, simply import it and the css file, and call Vue.use() to install. Just add the directive v-viewer to any element, then all img elements in it will be handled by viewer.


vue-parallax - 🌌 Vue.js component for parallax image scroll effects

  •    Javascript

Is a compontent for fast 60fps parallax scroll effects in vue 2. vue-parallax works with slots. So you can pass an image or even srcsets for better mobile experiences.

echo - Lazy-loading images with data-* attributes

  •    Javascript

Echo is a standalone JavaScript lazy-loading image micro-library. Echo is fast, 2KB, and uses HTML5 data-* attributes for simple. Check out a demo. Echo works in IE8+.Using Echo.js is simple, to add an image directly into the page simply add a data-echo attribute to the img tag. Alternatively if you want to use Echo to lazy load background images simply add a `data-echo-background' attribute to the element with the image URL.

ng-lazyload-image - Lazy image loader for Angular ≥ v2

  •    TypeScript

The browser you targeting need to have support of WeakMap and String.prototype.includes. If you need to support an older browser (like IE) you will need to include polyfill for WeakMap and String.prototype.includes (see https://github.com/zloirock/core-js for example).

vue-chat-scroll - Automatic scroll-to-bottom directive for vue.

  •    Javascript

A plugin for Vue.js 2 that scrolls to the bottom of an element when new content is added within said element. Check out our lovely demo. Just include ./dist/vue-chat-scroll.js after Vue itself.

lozad

  •    Javascript

It is written with an aim to lazy load images, iframes, ads, videos or any other element using the recently added Intersection Observer API with tremendous performance benefits. Existing lazy loading libraries hook up to the scroll event or use a periodic timer and call getBoundingClientRect() on elements that need to be lazy loaded. This approach, however, is painfully slow as each call to getBoundingClientRect() forces the browser to re-layout the entire page and will introduce considerable jank to your website.

vue-clipboard2 - A simple vue2 binding to clipboard.js

  •    Javascript

Yes, you can do it by using our new method: this.$copyText. See sample2, where we replace the clipboard directives with a v-on directive. Modern browsers have some limitations like that you can't use window.open without a user interaction. So there's the same restriction on copying things! Test it before you use it. Make sure you are not using this method inside any async method.

lazysizes - High performance and SEO friendly lazy loader for images (responsive and normal), iframes and more, that detects any visibility changes triggered through user interaction, CSS or JavaScript without configuration

  •    Javascript

lazysizes is a fast (jank-free), SEO-friendly and self-initializing lazyloader for images (including responsive images picture/srcset), iframes, scripts/widgets and much more. It also prioritizes resources by differentiating between crucial in view and near view elements to make perceived performance even faster. It may become also your number one tool to integrate responsive images. It can automatically calculate the sizes attribute for your responsive images, it allows you to share media queries for your media attributes with your CSS, helping to separate layout (CSS) from content/structure (HTML) and it makes integrating responsive images into any environment really simple. It also includes a set of optional plugins to further extend its functionality.

http-vue-loader - load .vue files from your html/js

  •    Javascript

Load .vue files directly from your html/js. No node.js environment, no build step. Since some browsers do not allow XMLHttpRequest to access local files (Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https), you can start a small express server to run this example.

BttrLazyLoading - [Unmaintained] Responsive Lazy Loading plugin for JQuery

  •    Javascript

BttrLazyLoading is a Jquery plugin that allows your web application to defer image loading until images are scrolled to but not only! BttrLazyLoading also allows you to have different version of an image for 4 differents screen sizes: phones (<768px), tablets (≥768px), desktops (≥992px) and large Desktops (≥1200px). BttrLazyLoading depends on jQuery (meaning jQuery must be included before the plugin files) and Animate.css (optional) for animations.