isotope/_posts/docs/2010-12-11-troubleshooting.mdown

---

title: Troubleshooting
category: docs
layout: doc
related: etc

---
 
## Unloaded Content
 
Most layout modes (i.e masonry, fitRows) need to measure the size of each item to appropriately account for its space in the layout. Unloaded content like images and @font-face fonts can throw off layout and cause item elements to overlap one another. Ideally, Isotope layouts should be initialized after all inner content has loaded.
 
### Images

#### Inline dimensions

For images, the best method is to specify the width and height of images inline.

{% highlight html %}

<img src="img-file.jpg" width="280" height="160" />

{% endhighlight %}

If you’re using a PHP-based CMS, you can use the [getimagesize](http://php.net/manual/en/function.getimagesize.php) function.

#### imagesLoaded plugin

The next best solution is to use the imagesLoaded plugin included with Isotope. It's a fork of [Paul Irish's plugin](https://gist.github.com/268257) that finds all the images in a context, and fires  a callback function once all the images have loaded.

{% highlight javascript %}

$('#container').imagesLoaded( function(){
  $(this).isotope({
    itemSelector : '.item',
  });
});

{% endhighlight %}

#### `$(window).load()`

Another solution is to initialize Isotope inside `$(window).load()` instead of `$(document).ready()`.

{% highlight javascript %}

$(window).load(function(){
  $('#container').isotope({
    // options...
  });
});

{% endhighlight %}

### @font-face fonts

Both Typekit and Google WebFont Loader provide font events to control scripts based on how fonts are loaded. 

+ [Typekit font events](http://blog.typekit.com/2010/10/18/more-control-with-typekits-font-events/)
+ [Google WebFont Loader: Events](http://code.google.com/apis/webfonts/docs/webfont_loader.html#Events)

Additionally, you can use the `$(window).load()` pattern above to wait for all content, including @font-face fonts, to load before initializing Isotope.