import from la bonne adresse and first refactoring for ouidade.com
This commit is contained in:
Bachir Soussi Chiadmi
@@ -0,0 +1,46 @@
|
||||
{
|
||||
"name": "imagesloaded",
|
||||
"description": "JavaScript is all like _You images done yet or what?_",
|
||||
"main": "imagesloaded.js",
|
||||
"dependencies": {
|
||||
"ev-emitter": "~1.0.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"jquery": ">=1.9 <4.0",
|
||||
"qunit": "~1.20.0"
|
||||
},
|
||||
"ignore": [
|
||||
"**/.*",
|
||||
"test",
|
||||
"package.json",
|
||||
"node_modules",
|
||||
"bower_components",
|
||||
"tests",
|
||||
"sandbox/",
|
||||
"contributing.md"
|
||||
],
|
||||
"homepage": "http://imagesloaded.desandro.com",
|
||||
"authors": [
|
||||
"David DeSandro"
|
||||
],
|
||||
"moduleType": [
|
||||
"amd",
|
||||
"globals",
|
||||
"node"
|
||||
],
|
||||
"keywords": [
|
||||
"images"
|
||||
],
|
||||
"license": "MIT",
|
||||
"version": "4.1.0",
|
||||
"_release": "4.1.0",
|
||||
"_resolution": {
|
||||
"type": "version",
|
||||
"tag": "v4.1.0",
|
||||
"commit": "0938c71e226f81d33c2205e39694f4b988596f7f"
|
||||
},
|
||||
"_source": "git://github.com/desandro/imagesloaded.git",
|
||||
"_target": "^4.1.0",
|
||||
"_originalSource": "imagesloaded",
|
||||
"_direct": true
|
||||
}
|
||||
@@ -0,0 +1,379 @@
|
||||
# imagesLoaded
|
||||
|
||||
<p class="tagline">JavaScript is all like "You images done yet or what?"</p>
|
||||
|
||||
[imagesloaded.desandro.com](http://imagesloaded.desandro.com)
|
||||
|
||||
Detect when images have been loaded.
|
||||
|
||||
## Install
|
||||
|
||||
### Download
|
||||
|
||||
+ [imagesloaded.pkgd.min.js](http://imagesloaded.desandro.com/imagesloaded.pkgd.min.js) minified
|
||||
+ [imagesloaded.pkgd.js](http://imagesloaded.desandro.com/imagesloaded.pkgd.js) un-minified
|
||||
|
||||
### CDN
|
||||
|
||||
``` html
|
||||
<script src="https://npmcdn.com/imagesloaded@4.1/imagesloaded.pkgd.min.js"></script>
|
||||
<!-- or -->
|
||||
<script src="https://npmcdn.com/imagesloaded@4.1/imagesloaded.pkgd.js"></script>
|
||||
```
|
||||
|
||||
### 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 `<img>`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 -->
|
||||
|
||||
## Properties
|
||||
|
||||
### LoadingImage.img
|
||||
|
||||
_Image_ - The `img` element
|
||||
|
||||
### LoadingImage.isLoaded
|
||||
|
||||
_Boolean_ - `true` when the image has succesfully 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 and [imports-loader](https://github.com/webpack/imports-loader) with npm.
|
||||
|
||||
``` bash
|
||||
npm install imagesloaded imports-loader
|
||||
```
|
||||
|
||||
In your config file, `webpack.config.js`, use the imports loader to disable `define` and set window for `imagesloaded`.
|
||||
|
||||
``` js
|
||||
module.exports = {
|
||||
module: {
|
||||
loaders: [
|
||||
{
|
||||
test: /imagesloaded|ev\-emitter/,
|
||||
loader: 'imports?define=>false&this=>window'
|
||||
}
|
||||
]
|
||||
}
|
||||
};
|
||||
```
|
||||
|
||||
(This hack is required because of an issue with how Webpack loads dependencies. [+1 this issue on GitHub](https://github.com/webpack/webpack/issues/883) to help get this issue addressed.)
|
||||
|
||||
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 jQuery = 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() { ... });
|
||||
});
|
||||
```
|
||||
|
||||
## Browser support
|
||||
|
||||
+ IE9+
|
||||
+ Android 2.3+
|
||||
+ iOS Safari 4+
|
||||
+ All other modern browsers
|
||||
|
||||
Use [imagesLoaded v3](http://imagesloaded.desandro.com/v3/) for IE8 support.
|
||||
|
||||
## MIT License
|
||||
|
||||
imagesLoaded is released under the [MIT License](http://desandro.mit-license.org/). Have at it.
|
||||
@@ -0,0 +1,35 @@
|
||||
{
|
||||
"name": "imagesloaded",
|
||||
"description": "JavaScript is all like _You images done yet or what?_",
|
||||
"main": "imagesloaded.js",
|
||||
"dependencies": {
|
||||
"ev-emitter": "~1.0.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"jquery": ">=1.9 <4.0",
|
||||
"qunit": "~1.20.0"
|
||||
},
|
||||
"ignore": [
|
||||
"**/.*",
|
||||
"test",
|
||||
"package.json",
|
||||
"node_modules",
|
||||
"bower_components",
|
||||
"tests",
|
||||
"sandbox/",
|
||||
"contributing.md"
|
||||
],
|
||||
"homepage": "http://imagesloaded.desandro.com",
|
||||
"authors": [
|
||||
"David DeSandro"
|
||||
],
|
||||
"moduleType": [
|
||||
"amd",
|
||||
"globals",
|
||||
"node"
|
||||
],
|
||||
"keywords": [
|
||||
"images"
|
||||
],
|
||||
"license": "MIT"
|
||||
}
|
||||
@@ -0,0 +1,172 @@
|
||||
/*jshint node: true, strict: false */
|
||||
|
||||
var fs = require('fs');
|
||||
var gulp = require('gulp');
|
||||
var rename = require('gulp-rename');
|
||||
var replace = require('gulp-replace');
|
||||
|
||||
// ----- hint ----- //
|
||||
|
||||
var jshint = require('gulp-jshint');
|
||||
|
||||
gulp.task( 'hint-js', function() {
|
||||
return gulp.src('imagesloaded.js')
|
||||
.pipe( jshint() )
|
||||
.pipe( jshint.reporter('default') );
|
||||
});
|
||||
|
||||
gulp.task( 'hint-test', function() {
|
||||
return gulp.src('test/unit/*.js')
|
||||
.pipe( jshint() )
|
||||
.pipe( jshint.reporter('default') );
|
||||
});
|
||||
|
||||
gulp.task( 'hint-task', function() {
|
||||
return gulp.src('gulpfile.js')
|
||||
.pipe( jshint() )
|
||||
.pipe( jshint.reporter('default') );
|
||||
});
|
||||
|
||||
var jsonlint = require('gulp-json-lint');
|
||||
|
||||
gulp.task( 'jsonlint', function() {
|
||||
return gulp.src( '*.json' )
|
||||
.pipe( jsonlint() )
|
||||
.pipe( jsonlint.report('verbose') );
|
||||
});
|
||||
|
||||
gulp.task( 'hint', [ 'hint-js', 'hint-test', 'hint-task', 'jsonlint' ]);
|
||||
|
||||
// -------------------------- RequireJS makes pkgd -------------------------- //
|
||||
|
||||
// refactored from gulp-requirejs-optimize
|
||||
// https://www.npmjs.com/package/gulp-requirejs-optimize/
|
||||
|
||||
var gutil = require('gulp-util');
|
||||
var through = require('through2');
|
||||
var requirejs = require('requirejs');
|
||||
var chalk = require('chalk');
|
||||
|
||||
function rjsOptimize( options ) {
|
||||
options = options || {};
|
||||
|
||||
requirejs.define('node/print', [], function() {
|
||||
return function(msg) {
|
||||
if( msg.substring(0, 5) === 'Error' ) {
|
||||
gutil.log( chalk.red( msg ) );
|
||||
} else {
|
||||
gutil.log( msg );
|
||||
}
|
||||
};
|
||||
});
|
||||
|
||||
var stream = through.obj(function (file, enc, cb) {
|
||||
if ( file.isNull() ) {
|
||||
return cb( null, file );
|
||||
}
|
||||
|
||||
options.logLevel = 2;
|
||||
|
||||
options.out = function( text ) {
|
||||
var outFile = new gutil.File({
|
||||
path: file.relative,
|
||||
contents: new Buffer( text )
|
||||
});
|
||||
cb( null, outFile );
|
||||
};
|
||||
|
||||
gutil.log('RequireJS optimizing');
|
||||
requirejs.optimize( options, null, function( err ) {
|
||||
var gulpError = new gutil.PluginError( 'requirejsOptimize', err.message );
|
||||
stream.emit( 'error', gulpError );
|
||||
});
|
||||
});
|
||||
|
||||
return stream;
|
||||
}
|
||||
|
||||
// regex for banner comment
|
||||
var reBannerComment = new RegExp('^\\s*(?:\\/\\*[\\s\\S]*?\\*\\/)\\s*');
|
||||
|
||||
function getBanner() {
|
||||
var src = fs.readFileSync( 'imagesloaded.js', 'utf8' );
|
||||
var matches = src.match( reBannerComment );
|
||||
var banner = matches[0].replace( 'imagesLoaded', 'imagesLoaded PACKAGED' );
|
||||
return banner;
|
||||
}
|
||||
|
||||
function addBanner( str ) {
|
||||
return replace( /^/, str );
|
||||
}
|
||||
|
||||
gulp.task( 'requirejs', function() {
|
||||
var banner = getBanner();
|
||||
// HACK src is not needed
|
||||
// should refactor rjsOptimize to produce src
|
||||
return gulp.src('imagesloaded.js')
|
||||
.pipe( rjsOptimize({
|
||||
baseUrl: 'bower_components',
|
||||
optimize: 'none',
|
||||
include: [
|
||||
'../imagesloaded'
|
||||
]
|
||||
}) )
|
||||
// remove named module
|
||||
.pipe( replace( "'../imagesloaded',", '' ) )
|
||||
// add banner
|
||||
.pipe( addBanner( banner ) )
|
||||
.pipe( rename('imagesloaded.pkgd.js') )
|
||||
.pipe( gulp.dest('.') );
|
||||
});
|
||||
|
||||
|
||||
// ----- uglify ----- //
|
||||
|
||||
var uglify = require('gulp-uglify');
|
||||
|
||||
gulp.task( 'uglify', [ 'requirejs' ], function() {
|
||||
var banner = getBanner();
|
||||
gulp.src('imagesloaded.pkgd.js')
|
||||
.pipe( uglify() )
|
||||
// add banner
|
||||
.pipe( addBanner( banner ) )
|
||||
.pipe( rename('imagesloaded.pkgd.min.js') )
|
||||
.pipe( gulp.dest('.') );
|
||||
});
|
||||
|
||||
// ----- version ----- //
|
||||
|
||||
// set version in source files
|
||||
|
||||
var minimist = require('minimist');
|
||||
|
||||
// use gulp version -t 1.2.3
|
||||
gulp.task( 'version', function() {
|
||||
var args = minimist( process.argv.slice(3) );
|
||||
var version = args.t;
|
||||
if ( !version || !/\d+\.\d+\.\d+/.test( version ) ) {
|
||||
gutil.log( 'invalid version: ' + chalk.red( version ) );
|
||||
return;
|
||||
}
|
||||
gutil.log( 'ticking version to ' + chalk.green( version ) );
|
||||
|
||||
gulp.src('imagesloaded.js')
|
||||
.pipe( replace( /imagesLoaded v\d+\.\d+\.\d+/, 'imagesLoaded v' + version ) )
|
||||
.pipe( gulp.dest('.') );
|
||||
|
||||
gulp.src( [ 'bower.json', 'package.json' ] )
|
||||
.pipe( replace( /"version": "\d+\.\d+\.\d+"/, '"version": "' + version + '"' ) )
|
||||
.pipe( gulp.dest('.') );
|
||||
// replace CDN links in README
|
||||
var minorVersion = version.match( /^\d+\.\d+/ )[0];
|
||||
gulp.src('README.md')
|
||||
.pipe( replace( /imagesloaded@\d+\.\d+/g, 'imagesloaded@' + minorVersion ))
|
||||
.pipe( gulp.dest('.') );
|
||||
});
|
||||
|
||||
// ----- default ----- //
|
||||
|
||||
gulp.task( 'default', [
|
||||
'hint',
|
||||
'uglify'
|
||||
]);
|
||||
@@ -0,0 +1,370 @@
|
||||
/*!
|
||||
* imagesLoaded v4.1.0
|
||||
* JavaScript is all like "You images are done yet or what?"
|
||||
* MIT License
|
||||
*/
|
||||
|
||||
( function( window, factory ) { 'use strict';
|
||||
// universal module definition
|
||||
|
||||
/*global define: false, module: false, require: false */
|
||||
|
||||
if ( typeof define == 'function' && define.amd ) {
|
||||
// AMD
|
||||
define( [
|
||||
'ev-emitter/ev-emitter'
|
||||
], function( EvEmitter ) {
|
||||
return factory( window, EvEmitter );
|
||||
});
|
||||
} else if ( typeof module == 'object' && module.exports ) {
|
||||
// CommonJS
|
||||
module.exports = factory(
|
||||
window,
|
||||
require('ev-emitter')
|
||||
);
|
||||
} else {
|
||||
// browser global
|
||||
window.imagesLoaded = factory(
|
||||
window,
|
||||
window.EvEmitter
|
||||
);
|
||||
}
|
||||
|
||||
})( window,
|
||||
|
||||
// -------------------------- factory -------------------------- //
|
||||
|
||||
function factory( window, EvEmitter ) {
|
||||
|
||||
'use strict';
|
||||
|
||||
var $ = window.jQuery;
|
||||
var console = window.console;
|
||||
|
||||
// -------------------------- helpers -------------------------- //
|
||||
|
||||
// extend objects
|
||||
function extend( a, b ) {
|
||||
for ( var prop in b ) {
|
||||
a[ prop ] = b[ prop ];
|
||||
}
|
||||
return a;
|
||||
}
|
||||
|
||||
// turn element or nodeList into an array
|
||||
function makeArray( obj ) {
|
||||
var ary = [];
|
||||
if ( Array.isArray( obj ) ) {
|
||||
// use object if already an array
|
||||
ary = obj;
|
||||
} else if ( typeof obj.length == 'number' ) {
|
||||
// convert nodeList to array
|
||||
for ( var i=0; i < obj.length; i++ ) {
|
||||
ary.push( obj[i] );
|
||||
}
|
||||
} else {
|
||||
// array of single index
|
||||
ary.push( obj );
|
||||
}
|
||||
return ary;
|
||||
}
|
||||
|
||||
// -------------------------- imagesLoaded -------------------------- //
|
||||
|
||||
/**
|
||||
* @param {Array, Element, NodeList, String} elem
|
||||
* @param {Object or Function} options - if function, use as callback
|
||||
* @param {Function} onAlways - callback function
|
||||
*/
|
||||
function ImagesLoaded( elem, options, onAlways ) {
|
||||
// coerce ImagesLoaded() without new, to be new ImagesLoaded()
|
||||
if ( !( this instanceof ImagesLoaded ) ) {
|
||||
return new ImagesLoaded( elem, options, onAlways );
|
||||
}
|
||||
// use elem as selector string
|
||||
if ( typeof elem == 'string' ) {
|
||||
elem = document.querySelectorAll( elem );
|
||||
}
|
||||
|
||||
this.elements = makeArray( elem );
|
||||
this.options = extend( {}, this.options );
|
||||
|
||||
if ( typeof options == 'function' ) {
|
||||
onAlways = options;
|
||||
} else {
|
||||
extend( this.options, options );
|
||||
}
|
||||
|
||||
if ( onAlways ) {
|
||||
this.on( 'always', onAlways );
|
||||
}
|
||||
|
||||
this.getImages();
|
||||
|
||||
if ( $ ) {
|
||||
// add jQuery Deferred object
|
||||
this.jqDeferred = new $.Deferred();
|
||||
}
|
||||
|
||||
// HACK check async to allow time to bind listeners
|
||||
setTimeout( function() {
|
||||
this.check();
|
||||
}.bind( this ));
|
||||
}
|
||||
|
||||
ImagesLoaded.prototype = Object.create( EvEmitter.prototype );
|
||||
|
||||
ImagesLoaded.prototype.options = {};
|
||||
|
||||
ImagesLoaded.prototype.getImages = function() {
|
||||
this.images = [];
|
||||
|
||||
// filter & find items if we have an item selector
|
||||
this.elements.forEach( this.addElementImages, this );
|
||||
};
|
||||
|
||||
/**
|
||||
* @param {Node} element
|
||||
*/
|
||||
ImagesLoaded.prototype.addElementImages = function( elem ) {
|
||||
// filter siblings
|
||||
if ( elem.nodeName == 'IMG' ) {
|
||||
this.addImage( elem );
|
||||
}
|
||||
// get background image on element
|
||||
if ( this.options.background === true ) {
|
||||
this.addElementBackgroundImages( elem );
|
||||
}
|
||||
|
||||
// find children
|
||||
// no non-element nodes, #143
|
||||
var nodeType = elem.nodeType;
|
||||
if ( !nodeType || !elementNodeTypes[ nodeType ] ) {
|
||||
return;
|
||||
}
|
||||
var childImgs = elem.querySelectorAll('img');
|
||||
// concat childElems to filterFound array
|
||||
for ( var i=0; i < childImgs.length; i++ ) {
|
||||
var img = childImgs[i];
|
||||
this.addImage( img );
|
||||
}
|
||||
|
||||
// get child background images
|
||||
if ( typeof this.options.background == 'string' ) {
|
||||
var children = elem.querySelectorAll( this.options.background );
|
||||
for ( i=0; i < children.length; i++ ) {
|
||||
var child = children[i];
|
||||
this.addElementBackgroundImages( child );
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
var elementNodeTypes = {
|
||||
1: true,
|
||||
9: true,
|
||||
11: true
|
||||
};
|
||||
|
||||
ImagesLoaded.prototype.addElementBackgroundImages = function( elem ) {
|
||||
var style = getComputedStyle( elem );
|
||||
if ( !style ) {
|
||||
// Firefox returns null if in a hidden iframe https://bugzil.la/548397
|
||||
return;
|
||||
}
|
||||
// get url inside url("...")
|
||||
var reURL = /url\((['"])?(.*?)\1\)/gi;
|
||||
var matches = reURL.exec( style.backgroundImage );
|
||||
while ( matches !== null ) {
|
||||
var url = matches && matches[2];
|
||||
if ( url ) {
|
||||
this.addBackground( url, elem );
|
||||
}
|
||||
matches = reURL.exec( style.backgroundImage );
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* @param {Image} img
|
||||
*/
|
||||
ImagesLoaded.prototype.addImage = function( img ) {
|
||||
var loadingImage = new LoadingImage( img );
|
||||
this.images.push( loadingImage );
|
||||
};
|
||||
|
||||
ImagesLoaded.prototype.addBackground = function( url, elem ) {
|
||||
var background = new Background( url, elem );
|
||||
this.images.push( background );
|
||||
};
|
||||
|
||||
ImagesLoaded.prototype.check = function() {
|
||||
var _this = this;
|
||||
this.progressedCount = 0;
|
||||
this.hasAnyBroken = false;
|
||||
// complete if no images
|
||||
if ( !this.images.length ) {
|
||||
this.complete();
|
||||
return;
|
||||
}
|
||||
|
||||
function onProgress( image, elem, message ) {
|
||||
// HACK - Chrome triggers event before object properties have changed. #83
|
||||
setTimeout( function() {
|
||||
_this.progress( image, elem, message );
|
||||
});
|
||||
}
|
||||
|
||||
this.images.forEach( function( loadingImage ) {
|
||||
loadingImage.once( 'progress', onProgress );
|
||||
loadingImage.check();
|
||||
});
|
||||
};
|
||||
|
||||
ImagesLoaded.prototype.progress = function( image, elem, message ) {
|
||||
this.progressedCount++;
|
||||
this.hasAnyBroken = this.hasAnyBroken || !image.isLoaded;
|
||||
// progress event
|
||||
this.emitEvent( 'progress', [ this, image, elem ] );
|
||||
if ( this.jqDeferred && this.jqDeferred.notify ) {
|
||||
this.jqDeferred.notify( this, image );
|
||||
}
|
||||
// check if completed
|
||||
if ( this.progressedCount == this.images.length ) {
|
||||
this.complete();
|
||||
}
|
||||
|
||||
if ( this.options.debug && console ) {
|
||||
console.log( 'progress: ' + message, image, elem );
|
||||
}
|
||||
};
|
||||
|
||||
ImagesLoaded.prototype.complete = function() {
|
||||
var eventName = this.hasAnyBroken ? 'fail' : 'done';
|
||||
this.isComplete = true;
|
||||
this.emitEvent( eventName, [ this ] );
|
||||
this.emitEvent( 'always', [ this ] );
|
||||
if ( this.jqDeferred ) {
|
||||
var jqMethod = this.hasAnyBroken ? 'reject' : 'resolve';
|
||||
this.jqDeferred[ jqMethod ]( this );
|
||||
}
|
||||
};
|
||||
|
||||
// -------------------------- -------------------------- //
|
||||
|
||||
function LoadingImage( img ) {
|
||||
this.img = img;
|
||||
}
|
||||
|
||||
LoadingImage.prototype = Object.create( EvEmitter.prototype );
|
||||
|
||||
LoadingImage.prototype.check = function() {
|
||||
// If complete is true and browser supports natural sizes,
|
||||
// try to check for image status manually.
|
||||
var isComplete = this.getIsImageComplete();
|
||||
if ( isComplete ) {
|
||||
// report based on naturalWidth
|
||||
this.confirm( this.img.naturalWidth !== 0, 'naturalWidth' );
|
||||
return;
|
||||
}
|
||||
|
||||
// If none of the checks above matched, simulate loading on detached element.
|
||||
this.proxyImage = new Image();
|
||||
this.proxyImage.addEventListener( 'load', this );
|
||||
this.proxyImage.addEventListener( 'error', this );
|
||||
// bind to image as well for Firefox. #191
|
||||
this.img.addEventListener( 'load', this );
|
||||
this.img.addEventListener( 'error', this );
|
||||
this.proxyImage.src = this.img.src;
|
||||
};
|
||||
|
||||
LoadingImage.prototype.getIsImageComplete = function() {
|
||||
return this.img.complete && this.img.naturalWidth !== undefined;
|
||||
};
|
||||
|
||||
LoadingImage.prototype.confirm = function( isLoaded, message ) {
|
||||
this.isLoaded = isLoaded;
|
||||
this.emitEvent( 'progress', [ this, this.img, message ] );
|
||||
};
|
||||
|
||||
// ----- events ----- //
|
||||
|
||||
// trigger specified handler for event type
|
||||
LoadingImage.prototype.handleEvent = function( event ) {
|
||||
var method = 'on' + event.type;
|
||||
if ( this[ method ] ) {
|
||||
this[ method ]( event );
|
||||
}
|
||||
};
|
||||
|
||||
LoadingImage.prototype.onload = function() {
|
||||
this.confirm( true, 'onload' );
|
||||
this.unbindEvents();
|
||||
};
|
||||
|
||||
LoadingImage.prototype.onerror = function() {
|
||||
this.confirm( false, 'onerror' );
|
||||
this.unbindEvents();
|
||||
};
|
||||
|
||||
LoadingImage.prototype.unbindEvents = function() {
|
||||
this.proxyImage.removeEventListener( 'load', this );
|
||||
this.proxyImage.removeEventListener( 'error', this );
|
||||
this.img.removeEventListener( 'load', this );
|
||||
this.img.removeEventListener( 'error', this );
|
||||
};
|
||||
|
||||
// -------------------------- Background -------------------------- //
|
||||
|
||||
function Background( url, element ) {
|
||||
this.url = url;
|
||||
this.element = element;
|
||||
this.img = new Image();
|
||||
}
|
||||
|
||||
// inherit LoadingImage prototype
|
||||
Background.prototype = Object.create( LoadingImage.prototype );
|
||||
|
||||
Background.prototype.check = function() {
|
||||
this.img.addEventListener( 'load', this );
|
||||
this.img.addEventListener( 'error', this );
|
||||
this.img.src = this.url;
|
||||
// check if image is already complete
|
||||
var isComplete = this.getIsImageComplete();
|
||||
if ( isComplete ) {
|
||||
this.confirm( this.img.naturalWidth !== 0, 'naturalWidth' );
|
||||
this.unbindEvents();
|
||||
}
|
||||
};
|
||||
|
||||
Background.prototype.unbindEvents = function() {
|
||||
this.img.removeEventListener( 'load', this );
|
||||
this.img.removeEventListener( 'error', this );
|
||||
};
|
||||
|
||||
Background.prototype.confirm = function( isLoaded, message ) {
|
||||
this.isLoaded = isLoaded;
|
||||
this.emitEvent( 'progress', [ this, this.element, message ] );
|
||||
};
|
||||
|
||||
// -------------------------- jQuery -------------------------- //
|
||||
|
||||
ImagesLoaded.makeJQueryPlugin = function( jQuery ) {
|
||||
jQuery = jQuery || window.jQuery;
|
||||
if ( !jQuery ) {
|
||||
return;
|
||||
}
|
||||
// set local variable
|
||||
$ = jQuery;
|
||||
// $().imagesLoaded()
|
||||
$.fn.imagesLoaded = function( options, callback ) {
|
||||
var instance = new ImagesLoaded( this, options, callback );
|
||||
return instance.jqDeferred.promise( $(this) );
|
||||
};
|
||||
};
|
||||
// try making plugin
|
||||
ImagesLoaded.makeJQueryPlugin();
|
||||
|
||||
// -------------------------- -------------------------- //
|
||||
|
||||
return ImagesLoaded;
|
||||
|
||||
});
|
||||
@@ -0,0 +1,487 @@
|
||||
/*!
|
||||
* imagesLoaded PACKAGED v4.1.0
|
||||
* JavaScript is all like "You images are done yet or what?"
|
||||
* MIT License
|
||||
*/
|
||||
|
||||
/**
|
||||
* EvEmitter v1.0.1
|
||||
* Lil' event emitter
|
||||
* MIT License
|
||||
*/
|
||||
|
||||
/* jshint unused: true, undef: true, strict: true */
|
||||
|
||||
( function( global, factory ) {
|
||||
// universal module definition
|
||||
/* jshint strict: false */ /* globals define, module */
|
||||
if ( typeof define == 'function' && define.amd ) {
|
||||
// AMD - RequireJS
|
||||
define( 'ev-emitter/ev-emitter',factory );
|
||||
} else if ( typeof module == 'object' && module.exports ) {
|
||||
// CommonJS - Browserify, Webpack
|
||||
module.exports = factory();
|
||||
} else {
|
||||
// Browser globals
|
||||
global.EvEmitter = factory();
|
||||
}
|
||||
|
||||
}( this, function() {
|
||||
|
||||
|
||||
|
||||
function EvEmitter() {}
|
||||
|
||||
var proto = EvEmitter.prototype;
|
||||
|
||||
proto.on = function( eventName, listener ) {
|
||||
if ( !eventName || !listener ) {
|
||||
return;
|
||||
}
|
||||
// set events hash
|
||||
var events = this._events = this._events || {};
|
||||
// set listeners array
|
||||
var listeners = events[ eventName ] = events[ eventName ] || [];
|
||||
// only add once
|
||||
if ( listeners.indexOf( listener ) == -1 ) {
|
||||
listeners.push( listener );
|
||||
}
|
||||
|
||||
return this;
|
||||
};
|
||||
|
||||
proto.once = function( eventName, listener ) {
|
||||
if ( !eventName || !listener ) {
|
||||
return;
|
||||
}
|
||||
// add event
|
||||
this.on( eventName, listener );
|
||||
// set once flag
|
||||
// set onceEvents hash
|
||||
var onceEvents = this._onceEvents = this._onceEvents || {};
|
||||
// set onceListeners array
|
||||
var onceListeners = onceEvents[ eventName ] = onceEvents[ eventName ] || [];
|
||||
// set flag
|
||||
onceListeners[ listener ] = true;
|
||||
|
||||
return this;
|
||||
};
|
||||
|
||||
proto.off = function( eventName, listener ) {
|
||||
var listeners = this._events && this._events[ eventName ];
|
||||
if ( !listeners || !listeners.length ) {
|
||||
return;
|
||||
}
|
||||
var index = listeners.indexOf( listener );
|
||||
if ( index != -1 ) {
|
||||
listeners.splice( index, 1 );
|
||||
}
|
||||
|
||||
return this;
|
||||
};
|
||||
|
||||
proto.emitEvent = function( eventName, args ) {
|
||||
var listeners = this._events && this._events[ eventName ];
|
||||
if ( !listeners || !listeners.length ) {
|
||||
return;
|
||||
}
|
||||
var i = 0;
|
||||
var listener = listeners[i];
|
||||
args = args || [];
|
||||
// once stuff
|
||||
var onceListeners = this._onceEvents && this._onceEvents[ eventName ];
|
||||
|
||||
while ( listener ) {
|
||||
var isOnce = onceListeners && onceListeners[ listener ];
|
||||
if ( isOnce ) {
|
||||
// remove listener
|
||||
// remove before trigger to prevent recursion
|
||||
this.off( eventName, listener );
|
||||
// unset once flag
|
||||
delete onceListeners[ listener ];
|
||||
}
|
||||
// trigger listener
|
||||
listener.apply( this, args );
|
||||
// get next listener
|
||||
i += isOnce ? 0 : 1;
|
||||
listener = listeners[i];
|
||||
}
|
||||
|
||||
return this;
|
||||
};
|
||||
|
||||
return EvEmitter;
|
||||
|
||||
}));
|
||||
|
||||
/*!
|
||||
* imagesLoaded v4.1.0
|
||||
* JavaScript is all like "You images are done yet or what?"
|
||||
* MIT License
|
||||
*/
|
||||
|
||||
( function( window, factory ) { 'use strict';
|
||||
// universal module definition
|
||||
|
||||
/*global define: false, module: false, require: false */
|
||||
|
||||
if ( typeof define == 'function' && define.amd ) {
|
||||
// AMD
|
||||
define( [
|
||||
'ev-emitter/ev-emitter'
|
||||
], function( EvEmitter ) {
|
||||
return factory( window, EvEmitter );
|
||||
});
|
||||
} else if ( typeof module == 'object' && module.exports ) {
|
||||
// CommonJS
|
||||
module.exports = factory(
|
||||
window,
|
||||
require('ev-emitter')
|
||||
);
|
||||
} else {
|
||||
// browser global
|
||||
window.imagesLoaded = factory(
|
||||
window,
|
||||
window.EvEmitter
|
||||
);
|
||||
}
|
||||
|
||||
})( window,
|
||||
|
||||
// -------------------------- factory -------------------------- //
|
||||
|
||||
function factory( window, EvEmitter ) {
|
||||
|
||||
|
||||
|
||||
var $ = window.jQuery;
|
||||
var console = window.console;
|
||||
|
||||
// -------------------------- helpers -------------------------- //
|
||||
|
||||
// extend objects
|
||||
function extend( a, b ) {
|
||||
for ( var prop in b ) {
|
||||
a[ prop ] = b[ prop ];
|
||||
}
|
||||
return a;
|
||||
}
|
||||
|
||||
// turn element or nodeList into an array
|
||||
function makeArray( obj ) {
|
||||
var ary = [];
|
||||
if ( Array.isArray( obj ) ) {
|
||||
// use object if already an array
|
||||
ary = obj;
|
||||
} else if ( typeof obj.length == 'number' ) {
|
||||
// convert nodeList to array
|
||||
for ( var i=0; i < obj.length; i++ ) {
|
||||
ary.push( obj[i] );
|
||||
}
|
||||
} else {
|
||||
// array of single index
|
||||
ary.push( obj );
|
||||
}
|
||||
return ary;
|
||||
}
|
||||
|
||||
// -------------------------- imagesLoaded -------------------------- //
|
||||
|
||||
/**
|
||||
* @param {Array, Element, NodeList, String} elem
|
||||
* @param {Object or Function} options - if function, use as callback
|
||||
* @param {Function} onAlways - callback function
|
||||
*/
|
||||
function ImagesLoaded( elem, options, onAlways ) {
|
||||
// coerce ImagesLoaded() without new, to be new ImagesLoaded()
|
||||
if ( !( this instanceof ImagesLoaded ) ) {
|
||||
return new ImagesLoaded( elem, options, onAlways );
|
||||
}
|
||||
// use elem as selector string
|
||||
if ( typeof elem == 'string' ) {
|
||||
elem = document.querySelectorAll( elem );
|
||||
}
|
||||
|
||||
this.elements = makeArray( elem );
|
||||
this.options = extend( {}, this.options );
|
||||
|
||||
if ( typeof options == 'function' ) {
|
||||
onAlways = options;
|
||||
} else {
|
||||
extend( this.options, options );
|
||||
}
|
||||
|
||||
if ( onAlways ) {
|
||||
this.on( 'always', onAlways );
|
||||
}
|
||||
|
||||
this.getImages();
|
||||
|
||||
if ( $ ) {
|
||||
// add jQuery Deferred object
|
||||
this.jqDeferred = new $.Deferred();
|
||||
}
|
||||
|
||||
// HACK check async to allow time to bind listeners
|
||||
setTimeout( function() {
|
||||
this.check();
|
||||
}.bind( this ));
|
||||
}
|
||||
|
||||
ImagesLoaded.prototype = Object.create( EvEmitter.prototype );
|
||||
|
||||
ImagesLoaded.prototype.options = {};
|
||||
|
||||
ImagesLoaded.prototype.getImages = function() {
|
||||
this.images = [];
|
||||
|
||||
// filter & find items if we have an item selector
|
||||
this.elements.forEach( this.addElementImages, this );
|
||||
};
|
||||
|
||||
/**
|
||||
* @param {Node} element
|
||||
*/
|
||||
ImagesLoaded.prototype.addElementImages = function( elem ) {
|
||||
// filter siblings
|
||||
if ( elem.nodeName == 'IMG' ) {
|
||||
this.addImage( elem );
|
||||
}
|
||||
// get background image on element
|
||||
if ( this.options.background === true ) {
|
||||
this.addElementBackgroundImages( elem );
|
||||
}
|
||||
|
||||
// find children
|
||||
// no non-element nodes, #143
|
||||
var nodeType = elem.nodeType;
|
||||
if ( !nodeType || !elementNodeTypes[ nodeType ] ) {
|
||||
return;
|
||||
}
|
||||
var childImgs = elem.querySelectorAll('img');
|
||||
// concat childElems to filterFound array
|
||||
for ( var i=0; i < childImgs.length; i++ ) {
|
||||
var img = childImgs[i];
|
||||
this.addImage( img );
|
||||
}
|
||||
|
||||
// get child background images
|
||||
if ( typeof this.options.background == 'string' ) {
|
||||
var children = elem.querySelectorAll( this.options.background );
|
||||
for ( i=0; i < children.length; i++ ) {
|
||||
var child = children[i];
|
||||
this.addElementBackgroundImages( child );
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
var elementNodeTypes = {
|
||||
1: true,
|
||||
9: true,
|
||||
11: true
|
||||
};
|
||||
|
||||
ImagesLoaded.prototype.addElementBackgroundImages = function( elem ) {
|
||||
var style = getComputedStyle( elem );
|
||||
if ( !style ) {
|
||||
// Firefox returns null if in a hidden iframe https://bugzil.la/548397
|
||||
return;
|
||||
}
|
||||
// get url inside url("...")
|
||||
var reURL = /url\((['"])?(.*?)\1\)/gi;
|
||||
var matches = reURL.exec( style.backgroundImage );
|
||||
while ( matches !== null ) {
|
||||
var url = matches && matches[2];
|
||||
if ( url ) {
|
||||
this.addBackground( url, elem );
|
||||
}
|
||||
matches = reURL.exec( style.backgroundImage );
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* @param {Image} img
|
||||
*/
|
||||
ImagesLoaded.prototype.addImage = function( img ) {
|
||||
var loadingImage = new LoadingImage( img );
|
||||
this.images.push( loadingImage );
|
||||
};
|
||||
|
||||
ImagesLoaded.prototype.addBackground = function( url, elem ) {
|
||||
var background = new Background( url, elem );
|
||||
this.images.push( background );
|
||||
};
|
||||
|
||||
ImagesLoaded.prototype.check = function() {
|
||||
var _this = this;
|
||||
this.progressedCount = 0;
|
||||
this.hasAnyBroken = false;
|
||||
// complete if no images
|
||||
if ( !this.images.length ) {
|
||||
this.complete();
|
||||
return;
|
||||
}
|
||||
|
||||
function onProgress( image, elem, message ) {
|
||||
// HACK - Chrome triggers event before object properties have changed. #83
|
||||
setTimeout( function() {
|
||||
_this.progress( image, elem, message );
|
||||
});
|
||||
}
|
||||
|
||||
this.images.forEach( function( loadingImage ) {
|
||||
loadingImage.once( 'progress', onProgress );
|
||||
loadingImage.check();
|
||||
});
|
||||
};
|
||||
|
||||
ImagesLoaded.prototype.progress = function( image, elem, message ) {
|
||||
this.progressedCount++;
|
||||
this.hasAnyBroken = this.hasAnyBroken || !image.isLoaded;
|
||||
// progress event
|
||||
this.emitEvent( 'progress', [ this, image, elem ] );
|
||||
if ( this.jqDeferred && this.jqDeferred.notify ) {
|
||||
this.jqDeferred.notify( this, image );
|
||||
}
|
||||
// check if completed
|
||||
if ( this.progressedCount == this.images.length ) {
|
||||
this.complete();
|
||||
}
|
||||
|
||||
if ( this.options.debug && console ) {
|
||||
console.log( 'progress: ' + message, image, elem );
|
||||
}
|
||||
};
|
||||
|
||||
ImagesLoaded.prototype.complete = function() {
|
||||
var eventName = this.hasAnyBroken ? 'fail' : 'done';
|
||||
this.isComplete = true;
|
||||
this.emitEvent( eventName, [ this ] );
|
||||
this.emitEvent( 'always', [ this ] );
|
||||
if ( this.jqDeferred ) {
|
||||
var jqMethod = this.hasAnyBroken ? 'reject' : 'resolve';
|
||||
this.jqDeferred[ jqMethod ]( this );
|
||||
}
|
||||
};
|
||||
|
||||
// -------------------------- -------------------------- //
|
||||
|
||||
function LoadingImage( img ) {
|
||||
this.img = img;
|
||||
}
|
||||
|
||||
LoadingImage.prototype = Object.create( EvEmitter.prototype );
|
||||
|
||||
LoadingImage.prototype.check = function() {
|
||||
// If complete is true and browser supports natural sizes,
|
||||
// try to check for image status manually.
|
||||
var isComplete = this.getIsImageComplete();
|
||||
if ( isComplete ) {
|
||||
// report based on naturalWidth
|
||||
this.confirm( this.img.naturalWidth !== 0, 'naturalWidth' );
|
||||
return;
|
||||
}
|
||||
|
||||
// If none of the checks above matched, simulate loading on detached element.
|
||||
this.proxyImage = new Image();
|
||||
this.proxyImage.addEventListener( 'load', this );
|
||||
this.proxyImage.addEventListener( 'error', this );
|
||||
// bind to image as well for Firefox. #191
|
||||
this.img.addEventListener( 'load', this );
|
||||
this.img.addEventListener( 'error', this );
|
||||
this.proxyImage.src = this.img.src;
|
||||
};
|
||||
|
||||
LoadingImage.prototype.getIsImageComplete = function() {
|
||||
return this.img.complete && this.img.naturalWidth !== undefined;
|
||||
};
|
||||
|
||||
LoadingImage.prototype.confirm = function( isLoaded, message ) {
|
||||
this.isLoaded = isLoaded;
|
||||
this.emitEvent( 'progress', [ this, this.img, message ] );
|
||||
};
|
||||
|
||||
// ----- events ----- //
|
||||
|
||||
// trigger specified handler for event type
|
||||
LoadingImage.prototype.handleEvent = function( event ) {
|
||||
var method = 'on' + event.type;
|
||||
if ( this[ method ] ) {
|
||||
this[ method ]( event );
|
||||
}
|
||||
};
|
||||
|
||||
LoadingImage.prototype.onload = function() {
|
||||
this.confirm( true, 'onload' );
|
||||
this.unbindEvents();
|
||||
};
|
||||
|
||||
LoadingImage.prototype.onerror = function() {
|
||||
this.confirm( false, 'onerror' );
|
||||
this.unbindEvents();
|
||||
};
|
||||
|
||||
LoadingImage.prototype.unbindEvents = function() {
|
||||
this.proxyImage.removeEventListener( 'load', this );
|
||||
this.proxyImage.removeEventListener( 'error', this );
|
||||
this.img.removeEventListener( 'load', this );
|
||||
this.img.removeEventListener( 'error', this );
|
||||
};
|
||||
|
||||
// -------------------------- Background -------------------------- //
|
||||
|
||||
function Background( url, element ) {
|
||||
this.url = url;
|
||||
this.element = element;
|
||||
this.img = new Image();
|
||||
}
|
||||
|
||||
// inherit LoadingImage prototype
|
||||
Background.prototype = Object.create( LoadingImage.prototype );
|
||||
|
||||
Background.prototype.check = function() {
|
||||
this.img.addEventListener( 'load', this );
|
||||
this.img.addEventListener( 'error', this );
|
||||
this.img.src = this.url;
|
||||
// check if image is already complete
|
||||
var isComplete = this.getIsImageComplete();
|
||||
if ( isComplete ) {
|
||||
this.confirm( this.img.naturalWidth !== 0, 'naturalWidth' );
|
||||
this.unbindEvents();
|
||||
}
|
||||
};
|
||||
|
||||
Background.prototype.unbindEvents = function() {
|
||||
this.img.removeEventListener( 'load', this );
|
||||
this.img.removeEventListener( 'error', this );
|
||||
};
|
||||
|
||||
Background.prototype.confirm = function( isLoaded, message ) {
|
||||
this.isLoaded = isLoaded;
|
||||
this.emitEvent( 'progress', [ this, this.element, message ] );
|
||||
};
|
||||
|
||||
// -------------------------- jQuery -------------------------- //
|
||||
|
||||
ImagesLoaded.makeJQueryPlugin = function( jQuery ) {
|
||||
jQuery = jQuery || window.jQuery;
|
||||
if ( !jQuery ) {
|
||||
return;
|
||||
}
|
||||
// set local variable
|
||||
$ = jQuery;
|
||||
// $().imagesLoaded()
|
||||
$.fn.imagesLoaded = function( options, callback ) {
|
||||
var instance = new ImagesLoaded( this, options, callback );
|
||||
return instance.jqDeferred.promise( $(this) );
|
||||
};
|
||||
};
|
||||
// try making plugin
|
||||
ImagesLoaded.makeJQueryPlugin();
|
||||
|
||||
// -------------------------- -------------------------- //
|
||||
|
||||
return ImagesLoaded;
|
||||
|
||||
});
|
||||
|
||||
File diff suppressed because one or more lines are too long
Reference in New Issue
Block a user