# Kiểm tra hình ảnh đã được tải với thư viện imagesLoaded (ok)
{% file src="/files/5G29eLKKFVKXwX1y8Upz" %}
> **Chú ý: Người ta hay sử dụng imagesLoaded** kết hợp với **masonry vì sau khi load ảnh xong mới áp dụng masonry để nó không vỡ giao diện :(**
```
```
###
### Ví dụ 1: Đếm số ảnh được gọi trong 1 class
```
background
background
```
### Demo
Add images Reset demo
[Edit this demo](https://codepen.io/desandro/pen/bIFyl) or [vanilla JS demo](https://codepen.io/desandro/pen/hlzaw) on CodePen.
Just to keep things interesting, there’s a 10% chance of adding a broken image.
### Install
#### Download
* [imagesloaded.pkgd.min.js](https://unpkg.com/imagesloaded@4/imagesloaded.pkgd.min.js) minified
* [imagesloaded.pkgd.js](https://unpkg.com/imagesloaded@4/imagesloaded.pkgd.js) un-minified
#### CDN
```html
```
#### Package managers
Install via [npm](https://www.npmjs.com/package/imagesloaded): `npm install imagesloaded`
Install via [Bower](http://bower.io/): `bower install imagesloaded --save`
### jQuery
You can use imagesLoaded as a jQuery Plugin.
```js
$('#container').imagesLoaded( function() {
// images have loaded
});
// options
$('#container').imagesLoaded( {
// options...
},
function() {
// images have loaded
}
);
```
`.imagesLoaded()` returns a [jQuery Deferred object](http://api.jquery.com/category/deferred-object/). This allows you to use `.always()`, `.done()`, `.fail()` and `.progress()`.
```js
$('#container').imagesLoaded()
.always( function( instance ) {
console.log('all images loaded');
})
.done( function( instance ) {
console.log('all images successfully loaded');
})
.fail( function() {
console.log('all images loaded, at least one is broken');
})
.progress( function( instance, image ) {
var result = image.isLoaded ? 'loaded' : 'broken';
console.log( 'image is ' + result + ' for ' + image.img.src );
});
```
### Vanilla JavaScript
You can use imagesLoaded with vanilla JS.
```js
imagesLoaded( elem, callback )
// options
imagesLoaded( elem, options, callback )
// you can use `new` if you like
new imagesLoaded( elem, callback )
```
* `elem` *Element, NodeList, Array, or Selector String*
* `options` *Object*
* `callback` *Function* - function triggered after all images have been loaded
Using a callback function is the same as binding it to the `always` event (see below).
```js
// element
imagesLoaded( document.querySelector('#container'), function( instance ) {
console.log('all images are loaded');
});
// selector string
imagesLoaded( '#container', function() {...});
// multiple elements
var posts = document.querySelectorAll('.post');
imagesLoaded( posts, function() {...});
```
Bind events with vanilla JS with .on(), .off(), and .once() methods.
```js
var imgLoad = imagesLoaded( elem );
function onAlways( instance ) {
console.log('all images are loaded');
}
// bind with .on()
imgLoad.on( 'always', onAlways );
// unbind with .off()
imgLoad.off( 'always', onAlways );
```
### Background
Detect when background images have loaded, in addition to `![]()
`s.
Set `{ background: true }` to detect when the element's background image has loaded.
```js
// jQuery
$('#container').imagesLoaded( { background: true }, function() {
console.log('#container background image loaded');
});
// vanilla JS
imagesLoaded( '#container', { background: true }, function() {
console.log('#container background image loaded');
});
```
[See jQuery demo](http://codepen.io/desandro/pen/pjVMPB) or [vanilla JS demo](http://codepen.io/desandro/pen/avKooW) on CodePen.
Set to a selector string like `{ background: '.item' }` to detect when the background images of child elements have loaded.
```js
// jQuery
$('#container').imagesLoaded( { background: '.item' }, function() {
console.log('all .item background images loaded');
});
// vanilla JS
imagesLoaded( '#container', { background: '.item' }, function() {
console.log('all .item background images loaded');
});
```
[See jQuery demo](http://codepen.io/desandro/pen/avKoZL) or [vanilla JS demo](http://codepen.io/desandro/pen/vNrBGz) on CodePen.
### Events
#### always
```js
// jQuery
$('#container').imagesLoaded().always( function( instance ) {
console.log('ALWAYS - all images have been loaded');
});
// vanilla JS
imgLoad.on( 'always', function( instance ) {
console.log('ALWAYS - all images have been loaded');
});
```
Triggered after all images have been either loaded or confirmed broken.
* `instance` *imagesLoaded* - the imagesLoaded instance
#### done
```js
// jQuery
$('#container').imagesLoaded().done( function( instance ) {
console.log('DONE - all images have been successfully loaded');
});
// vanilla JS
imgLoad.on( 'done', function( instance ) {
console.log('DONE - all images have been successfully loaded');
});
```
Triggered after all images have successfully loaded without any broken images.
#### fail
```js
$('#container').imagesLoaded().fail( function( instance ) {
console.log('FAIL - all images loaded, at least one is broken');
});
// vanilla JS
imgLoad.on( 'fail', function( instance ) {
console.log('FAIL - all images loaded, at least one is broken');
});
```
Triggered after all images have been loaded with at least one broken image.
#### progress
```js
imgLoad.on( 'progress', function( instance, image ) {
var result = image.isLoaded ? 'loaded' : 'broken';
console.log( 'image is ' + result + ' for ' + image.img.src );
});
```
Triggered after each image has been loaded.
* `instance` *imagesLoaded* - the imagesLoaded instance
* `image` *LoadingImage* - the LoadingImage instance of the loaded image
### Sponsored by Metafizzy
Development on imagesLoaded is sponsored by [Metafizzy](https://metafizzy.co/). Metafizzy makes delightful UI libraries that use imagesLoaded:
[](https://isotope.metafizzy.co/)[](https://flickity.metafizzy.co/)[](https://packery.metafizzy.co/)
### Properties
#### LoadingImage.img
*Image* - The `img` element
#### LoadingImage.isLoaded
*Boolean* - `true` when the image has successfully loaded
#### imagesLoaded.images
Array of *LoadingImage* instances for each image detected
```js
var imgLoad = imagesLoaded('#container');
imgLoad.on( 'always', function() {
console.log( imgLoad.images.length + ' images loaded' );
// detect which image is broken
for ( var i = 0, len = imgLoad.images.length; i < len; i++ ) {
var image = imgLoad.images[i];
var result = image.isLoaded ? 'loaded' : 'broken';
console.log( 'image is ' + result + ' for ' + image.img.src );
}
});
```
### Browserify
imagesLoaded works with [Browserify](http://browserify.org/).
```bash
npm install imagesloaded --save
```
```js
var imagesLoaded = require('imagesloaded');
imagesLoaded( elem, function() {...} );
```
Use `.makeJQueryPlugin` to make to use `.imagesLoaded()` jQuery plugin.
```js
var $ = require('jquery');
var imagesLoaded = require('imagesloaded');
// provide jQuery argument
imagesLoaded.makeJQueryPlugin( $ );
// now use .imagesLoaded() jQuery plugin
$('#container').imagesLoaded( function() {...});
```
### Webpack
Install imagesLoaded with npm.
```bash
npm install imagesloaded
```
You can then `require('imagesloaded')`.
```js
// main.js
var imagesLoaded = require('imagesloaded');
imagesLoaded( '#container', function() {
// images have loaded
});
```
Use `.makeJQueryPlugin` to make `.imagesLoaded()` jQuery plugin.
```js
// main.js
var imagesLoaded = require('imagesloaded');
var $ = require('jquery');
// provide jQuery argument
imagesLoaded.makeJQueryPlugin( $ );
// now use .imagesLoaded() jQuery plugin
$('#container').imagesLoaded( function() {...});
```
Run webpack.
```bash
webpack main.js bundle.js
```
### RequireJS
imagesLoaded works with [RequireJS](http://requirejs.org/).
You can require [imagesloaded.pkgd.js](http://imagesloaded.desandro.com/imagesloaded.pkgd.js).
```js
requirejs( [
'path/to/imagesloaded.pkgd.js',
], function( imagesLoaded ) {
imagesLoaded( '#container', function() { ... });
});
```
Use `.makeJQueryPlugin` to make `.imagesLoaded()` jQuery plugin.
```js
requirejs( [
'jquery',
'path/to/imagesloaded.pkgd.js',
], function( $, imagesLoaded ) {
// provide jQuery argument
imagesLoaded.makeJQueryPlugin( $ );
// now use .imagesLoaded() jQuery plugin
$('#container').imagesLoaded( function() {...});
});
```
You can manage dependencies with [Bower](http://bower.io/). Set `baseUrl` to `bower_components` and set a path config for all your application code.
```js
requirejs.config({
baseUrl: 'bower_components/',
paths: { // path to your app
app: '../'
}
});
requirejs( [
'imagesloaded/imagesloaded',
'app/my-component.js'
], function( imagesLoaded, myComp ) {
imagesLoaded( '#container', function() { ... });
});
```
---
# Agent Instructions: Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.
Perform an HTTP GET request on the current page URL with the `ask` query parameter:
```
GET https://javascriptuse.gitbook.io/javascript/kiem-tra-hinh-anh-da-duoc-tai-voi-thu-vien-imagesloaded-ok.md?ask=
```
The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.
Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.
.jpg)
