Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/duzun/jquery.load_img
A simple method to load images asynchronously.
https://github.com/duzun/jquery.load_img
img javascript jquery jquery-plugin load
Last synced: about 2 months ago
JSON representation
A simple method to load images asynchronously.
- Host: GitHub
- URL: https://github.com/duzun/jquery.load_img
- Owner: duzun
- License: mit
- Created: 2015-05-07T15:47:30.000Z (over 9 years ago)
- Default Branch: master
- Last Pushed: 2023-01-08T15:01:19.000Z (about 2 years ago)
- Last Synced: 2024-05-28T13:02:09.425Z (8 months ago)
- Topics: img, javascript, jquery, jquery-plugin, load
- Language: JavaScript
- Size: 327 KB
- Stars: 2
- Watchers: 2
- Forks: 1
- Open Issues: 1
-
Metadata Files:
- Readme: README.MD
- License: LICENSE
Awesome Lists containing this project
README
# Load images asynchronously with JS.
## Install
#### With `npm`
```sh
npm i -S jquery.load_img
```
If you are using a build system:
```js
import jQuery from 'jquery'; // we need jQuery
import load_img_init from 'jquery.load_img'; // import the init function of the plugin
load_img = load_img_init(jQuery); // init the plugin on this copy of jQuery
```
#### Without `npm`
Download the [production version][min] or the [development version][max]
or use [unpkg version][unpkg] directly in your HTML.
[min]: https://raw.github.com/duzun/jquery.load_img/master/dist/load_img.min.js
[max]: https://raw.github.com/duzun/jquery.load_img/master/dist/load_img.js
[unpkg]: https://unpkg.com/jquery.load_img
In your web page:
```html
```
## Usage
```javascript
// Set after how many milliseconds to allow to retry loading an image which errored.
// If 0, calls to $.load_img() for a source that errored once would error all the time.
$.load_img.settings.errorExpires = 1000; // defaults to 1s
// Use HTMLImageElement.decode() API when available by default
$.load_img.settings.decode = !!HTMLImageElement.prototype.decode;
// Callback version
$.load_img(src, function (srcOrFalse, event) {
if ( srcOrFalse ) {
var src = srcOrFalse;
// do something with `this` image and `src`
}
else {
// error loading the image. event.type == "error"
}
});
// Promise version
$.load_img(src)
.then(
function onLoad(event) {
var src = event.src;
// do something with `event.target` and `src`
},
function onError(event) {
// error loading the image. event.type == "error"
}
)
// Provide options object
$.load_img(src, { errorExpires: 3000, decode: false })
.then(
// ...
)
// Check whether an URL is in cache
if ( $.load_img.inCache(src) ) {
// ...
}
// Check whether an image exists synchronously
switch ( $.load_img.exists(src) ) {
case true:
// Image loaded, it is safe to use it
break;
case false:
// Image loaded, but doesn't exists (or some error), it is not safe to use it
break;
case undefined:
// Image not loaded yet, call $.load_img(src) ...
break;
}
// With callback, similar to $.load_img(src, cb):
$.load_img.exists(src, function(src) {
if ( src ) {
// image loaded and exists
}
else {
// image doesn't exist
}
});
// remove all image sources from cache
$.load_img.purgeCache() ;
// If we are not interested in the Image instance, we could ask just for the src of the image after it is preloaded
$.load_img.src(src, { decode: false })
.then(
(src) => {
// image loaded and exists
},
(errorEvent) => {
// error loading the image. errorEvent.type == "error"
}
);
```