Question

My current solution gets some content via AJAX, Inserts it into a DIV then hides it and fade it in.

The issue with that is the content contains images and an iframe, The solutions flickers and the fadeIn doesn’t look smooth.

What i’d like to do is to only fadeIn after the iframe and pictures are fully loaded.

How to do that?

Answer 1

This will wait until all child content has finished loading:

$("#wrapperDivID").load(function (){
    // do something, e.g.
    $(this).fadeIn();
});

See .load().

In your specific case the following should work:

$('#content').load('/echo/html/',data, function() {
  alert('fired');
});