Images loaded using AJAX are hidden unless browser window is resized

Question

Please see http://new.damir.com.au. Click one of the two portfolio items being shown under the portfolio section.

I'm using AJAX to load HTML (including image tags) from one file and insert it into the parent file. Everything works as intended, except that the images are not being rendered. The HTML image tag is there but it is not shown on screen unless you resize the browser window. Resizing the window somehow refreshes what is rendered on screen and the images are shown properly. Here is my code:

$.ajax({
            cache: false,
              type: 'POST',
              url: theURL,
              beforeSend:function(){
                // this is where we append a loading image
              },
              success:function(data){
                // successful request; do something with the data
                $(expandedElement).find('.wrap').append(data);
                expandedElement.addClass('loaded');
                // HTML has been loaded. Show it.
                // Initiate Flexslider
                  $(expandedElement).find('.wrap').flexslider({
                    animation: 'slide',
                    animationLoop: false,
                    prevText: '<span>Previous</span>',
                        nextText: '<span>Next</span>',   
                    slideshow: false
                  });
                  // Animate in the project
                $(expandedElement).fadeIn(1000);
                $('html, body').animate({
                    scrollTop: $(expandedElement).offset().top - 20
                }, 1000);

              },
              error:function(){
                // failed request; give feedback to user

              }

Answer 1

Ok seems the problem is unrelated to what I was talking about in the question. I was using the picturefill.js library and this was causing the images not to render properly when loaded through AJAX.