All Projects → jawil → lazyImages

jawil / lazyImages

Licence: other
基于ES6的轻量级,高性能,简便的图片懒加载 🐈

Programming Languages

javascript
184084 projects - #8 most used programming language

Projects that are alternatives of or similar to lazyImages

lazy-load-images.js
Progressive & lazy loading images.
Stars: ✭ 17 (-60.47%)
Mutual labels:  lazy, lazy-loading, lazyload-images
jekyll-loading-lazy
🧙🏽‍♀️ Automatically adds loading="lazy" to <img> and <iframe> tags. Load images on your sites lazily without JavaScript.
Stars: ✭ 41 (-4.65%)
Mutual labels:  lazy, lazy-loading, lazyload-images
Accessible Image Lazy Load
😴 gandul! accessible lazy loading images
Stars: ✭ 281 (+553.49%)
Mutual labels:  lazy, lazy-loading
Vanilla Lazyload
LazyLoad is a lightweight, flexible script that speeds up your website by deferring the loading of your below-the-fold images, backgrounds, videos, iframes and scripts to when they will enter the viewport. Written in plain "vanilla" JavaScript, it leverages IntersectionObserver, supports responsive images and enables native lazy loading.
Stars: ✭ 6,596 (+15239.53%)
Mutual labels:  lazy-loading, lazyload-images
Responsively Lazy
Lazy load responsive images
Stars: ✭ 1,080 (+2411.63%)
Mutual labels:  lazy, lazy-loading
magento2-catalog-lazy-load
Improve the load time of your Magento 2 categories pages by loading your images on demand with our Lazy Load Extension
Stars: ✭ 56 (+30.23%)
Mutual labels:  lazy-loading, lazyload-images
Pimg
📷 Mini Image Lazy Loader for P(R)eact and Vue
Stars: ✭ 97 (+125.58%)
Mutual labels:  lazy, lazy-loading
Jquery.lazy
A lightweight, fast, feature-rich, powerful and highly configurable delayed content, image and background lazy loading plugin for jQuery & Zepto.
Stars: ✭ 965 (+2144.19%)
Mutual labels:  lazy, lazy-loading
relaze
Tiny image lazy loading library for React.
Stars: ✭ 20 (-53.49%)
Mutual labels:  lazy, lazy-loading
guide-to-async-components
📖 Guide To JavaScript Async Components
Stars: ✭ 79 (+83.72%)
Mutual labels:  lazy-loading, lazyload-images
rocket-lazy-load
Standalone LazyLoad plugin for WordPress (based on WP Rocket)
Stars: ✭ 25 (-41.86%)
Mutual labels:  lazy-loading, lazyload-images
lazysimon
Minimal effort 350 byte JavaScript library to lazy load all <img> on your website
Stars: ✭ 18 (-58.14%)
Mutual labels:  lazy-loading, lazyload-images
esri-react-router-example
Example of how to load and use the ArcGIS API for JavaScript in a react-router application
Stars: ✭ 24 (-44.19%)
Mutual labels:  lazy-loading
zip
Lazy Streamed Zip Implementation
Stars: ✭ 15 (-65.12%)
Mutual labels:  lazy
express-lazy-router
Lazy loading for express router
Stars: ✭ 27 (-37.21%)
Mutual labels:  lazy
osprey-delight
Osprey Delight is the free-minded artist's choice for a clutter-free and blazingly fast single-page portfolio.
Stars: ✭ 43 (+0%)
Mutual labels:  lazy-loading
lc-spring-data-r2dbc
An extension of spring-data-r2dbc to provide features such as relationships, joins, cascading save/delete, lazy loading, sequence, schema generation, composite id
Stars: ✭ 30 (-30.23%)
Mutual labels:  lazy-loading
ngx-lazy-el
Lazy Loading Angular Components made easy powered by Angular Elements
Stars: ✭ 26 (-39.53%)
Mutual labels:  lazy-loading
ember-cli-g-maps
Deprecated Google Maps Addon
Stars: ✭ 58 (+34.88%)
Mutual labels:  lazy-loading
lazysodium-java
A Java implementation of the Libsodium crypto library. For the lazy dev.
Stars: ✭ 110 (+155.81%)
Mutual labels:  lazy

基于ES6的轻量级,高性能,简单的图片懒加载插件

http://codepen.io/jawil/full/EWJRMN/

 * [lazyImage plugin]
 * 基于ES6的轻量级,高性能,简单的图片懒加载插件
 * @Author  jawil
 * @date    2017-05-22
 * @param   {object}   插件配置参数

示例:

// 默认配置
new Lazy({
       containerId: window, //图片顶层容器
       offset: 100, //在定义可视区的范围内开始加载
       throttle: 250, //250ms触发一次元素scroll时间,函数节流防抖
       unload: false, //一旦图片不在可视区就移除已经加载的图片
       callback: function(element, op) { //图片加载完成之后的回调函数
           //doSomething
       })

效果图

图片有点大,稍等片刻。建议上面Demo效果预览地址进行预览。

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].