1.9 KiB
| title | category | layout | related |
|---|---|---|---|
| Troubleshooting | docs | doc | 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 %}
{% endhighlight %}
If you’re using a PHP-based CMS, you can use the getimagesize 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 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.
Additionally, you can use the $(window).load() pattern above to wait for all content, including @font-face fonts, to load before initializing Isotope.