dmgload
Highly performant, light and configurable lazy loader in pure JS with no dependencies for images in H5.
Last updated 2 years ago by luowen .
MIT · Repository · Bugs · Original npm · Tarball · package.json
$ cnpm install dmgload 
SYNC missed versions from official npm registry.

Dmgload

Highly performant, light and configurable lazy loader in pure JS with no otherdependencies for H5.

Features

  • lazy loads elements performantly using pure JavaScript
  • high performant and very small size ( Bundle size: 1.47 KB, Gzipped size: 873 B )
  • design for mobile phone, can be used in android 2.3 and higher
  • solve ios scroll event only trigger at the ending
  • the most useful Feature, it support lazy-load Doms which is dynamic add to the document,you don't need call any other API。

中文

Install

# You can install dmgload with npm
$ npm install --save dmgload

Usage

Then with a module bundler like rollup or webpack, use as you would anything else:

// using ES6 modules
import dmgload from 'dmgload';
dmgload.lazyload();

// using CommonJS modules
var dmgload = require('dmgload');
dmgload.lazyload();
<script type="text/javascript" src="/dist/dmgload.min.js"></script>
<script type="text/javascript"> dmgload.lazyload();</script>

In HTML, add an identifier to the element (default selector identified is lazyload class):

<img class="lazyload" data-src="image.png" />

Desc and Reference

you can also set some options to controll the actions

import dmgload from 'Dmgload';
dmgload.lazyload{
    selector: ".lazyload",
    offset: 50,  //偏移量,在距离视口多远的时候就开始加载
    debounce_time: 30, //防抖时间,在该时间内时是不会重复触发了。
    throttle_time: 300,  //节流时间,在超过该时间之后一定要触发的。
    default_img: 'data:img/jpg;base64,iVBORw0KGgoAAAANSUhEUgAAADYAAABFCAYAAAAB8xWyAAAACXBIWXMAAAsSAAALEgHS3X78AAAAJUlEQVRoge3BMQEAAADCoPVP7WMMoAAAAAAAAAAAAAAAAAAA4AY6fQABFpNNRwAAAABJRU5ErkJggg==' // 在图片失效的时候使用的默认替代图片
};

Current Tags

  • 1.0.4                                ...           latest (2 years ago)

5 Versions

  • 1.0.4                                ...           2 years ago
  • 1.0.3                                ...           2 years ago
  • 1.0.2                                ...           2 years ago
  • 1.0.1                                ...           2 years ago
  • 1.0.0                                ...           2 years ago
Maintainers (1)
Downloads
Today 0
This Week 1
This Month 10
Last Day 0
Last Week 6
Last Month 3
Dependencies (0)
None
Dev Dependencies (10)
Dependents (0)
None

Copyright 2014 - 2016 © taobao.org |