X-BUILD

X-LOAD

The preloading, lazy loading, and sequential loading control image downloading methods are mainly implemented for the loading loading progress of the H5 page.

Installation

  • Install via npm or yarn:
npm install x-load --save

Quote

  • Install through the package manager:
import XLoad from 'x-load';

This project is packaged in rollup using UMD format, supports AMD, CommonJS, and script tags, [download source] (https://github.com/codexu/x-load/tree/master/dist)

Getting off

  1. Add id="root" to the body wrapper and write all your body content under this div.

  2. The X-BUILD project has been defined in index.pug div#root , and all the content is written in app.pug.

  3. <img> tags use data-src to pass in image links, do not set src attribute .

  4. Add at least one <img> tag to the attribute prior to indicate that this image needs to be loaded first.

<!-- html -->
<div id="root">
  <img data-src="./abc.jpg" prior>
</div>

Parameters

When instantiating XLoad, pass in the object configuration parameter:

new XLoad({
  // ...
});

wrapper

#root <HTMLelement>

Incoming the body wrap layer DOM.

loader

null <HTMLelement>

If you need a custom loading effect, pass in a custom DOM.

attr

'data-src' <String>

Change this when the <img data-src="url"> naming conflicts.

prior

'prior' <String>

Change this when the <img prior> naming conflicts.

sync

true <Boolean>

Default sync loading (loaded in order), control <img prior> The remaining image loading mode after the image is loaded, set to false: asynchronous loading (load all images at the same time).

loadImg

null <String>

Image path, used to unload the background image of the completed image, note: use webpack, please use require().

beforeLoading(object)

none <Function>

Fires when instantiation is complete.

  • object <Object> points to the instance

nextTickLoading(percent)

none <Function>

Each <img prior> is fired after loading (whether successful or failed).

  • percent <Number> The current image loading progress is a decimal value of 0-1.

afterLoading()

none <Function>

All <img prior> is executed after loading is complete.

  • object <Object> points to the instance

← Animate →