Skip to content

Instantly share code, notes, and snippets.

@desandro
Created September 24, 2013 12:26
  • Star 1 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
Star You must be signed in to star a gist
Save desandro/6683996 to your computer and use it in GitHub Desktop.
imagesLoaded + requireJS

Install imagesLoaded via Bower

bower install imagesloaded

The config in main.js can be set up several ways

requirejs.config({
  // set paths object
  paths: {
    eventie: 'bower_components/eventie',
    eventEmitter: 'bower_components/eventEmitter'
  }
});

requirejs( [ 'bower_components/imagesloaded/imagesloaded' ], function( imagesLoaded ) {
  imagesLoaded( document.body, function() {
    console.log('images loaded')
  });
});
requirejs.config({
  // set paths object with imagesLoaded too
  paths: {
    eventie: 'bower_components/eventie',
    eventEmitter: 'bower_components/eventEmitter',
    imagesloaded: 'bower_components/imagesloaded'
  }
});

requirejs( [ 'imagesloaded/imagesloaded' ], function( imagesLoaded ) {
  imagesLoaded( document.body, function() {
    console.log('images loaded')
  });
});
requirejs.config({
  // set bower_components as base
  baseUrl: 'bower_components'
});

requirejs( [ 'imagesloaded/imagesloaded' ], function( imagesLoaded ) {
  imagesLoaded( document.body, function() {
    console.log('images loaded')
  });
});
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>require js</title>
<script data-main="main" src="http://requirejs.org/docs/release/2.1.8/comments/require.js"></script>
</head>
<body>
<h1>require js</h1>
<img src="http://lorempixel.com/400/200" />
<img src="http://lorempixel.com/400/203" />
<img src="http://lorempixel.com/300/203" />
<img src="http://lorempixel.com/300/303" />
<img src="http://lorempixel.com/200/303" />
</body>
</html>
requirejs.config({
// baseUrl: 'bower_components'
// OR
paths: {
eventie: 'bower_components/eventie',
eventEmitter: 'bower_components/eventEmitter',
imagesloaded: 'bower_components/imagesloaded'
}
});
requirejs( [ 'imagesloaded/imagesloaded' ], function( imagesLoaded ) {
imagesLoaded( document.body, function() {
console.log('images loaded')
});
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment