Load flexslider if/when shown?

JavaScript
1

Hi, I have a problem…

I am working on a ecommerce website, and this websites has product-articles, and each of these have their own little flexslider. A number of articles is shown at start, then I have a button for loading more products. But the thing is the flexslider wont work for the these products, because the where hidden with display: none;
So what I need to do is execute flexslider() when the article is visible or something.
The HTML looks something like this:

<div>
<div class="item">
<div class="flexslider"></div>
</div>
<div class="item">
<div class="flexslider"></div>
</div>
<div class="item">
<div class="flexslider"></div>
</div>
<div class="item">
<div class="flexslider"></div>
</div>
</div>

<button class="showMore">Show more</button>

<div>
<div class="item">
<div class="flexslider"></div>
</div>
<div class="item">
<div class="flexslider"></div>
</div>
<div class="item">
<div class="flexslider"></div>
</div>
<div class="item">
<div class="flexslider"></div>
</div>
</div>

And my current flexslider loading script looks like this:

$('.flexslider').flexslider();

Anyone know how this could be done?