iFrame .load event not waiting for preloading images to finish

Question

I have built a portfolio site which contains an iFrame to display artworks. To display each artwork an html page containing a large image is loaded into the iFrame.

The iFrame is hidden whilst empty (display:none) and is supposed to fade up only when the content is fully loaded.

//pass url of artwork page to iFrame
$("#creativeiframe").attr('src', thisLink.attr('href'));

//fade up iFrame once content loaded
$('#creativeiframe').load(function() {
        $('#creativeiframe').fadeIn(300);
});

I had this working as expected - the iFrame would only load up when the content including the large image that had loaded completely, but slow loading prompted me to try preloading the artwork images so they would start downloading before the user clicked to load them into the iFrame.

function preloadImage(url)
{
    var img=new Image();
    img.src=url;
}

Now I have a problem - sometimes when a user clicks to load an artwork the iFrame will fade up showing a half-loaded image, or worse just showing the html content without the image loaded. I have looked at Chrome Dev Tools Network inspector and this appears to occur when the image in question has started preloading, but not finished.

So my questions are:

Does anyone know why this is happening? Is it because with the preloading there is no network request for the image when the iFrame src is changed, so the .load event doesn't wait for the image to load?
Is there a way I can get the iFrame .load event to wait for the 'half preloaded' image to finish loading before firing?

if your images really big, i advise you to use **Progressive JPEG** for preview. — Igor Benikov, Dec 15 '13 at 13:08
Thanks Igor, yes I'm using Progressive JPEG, compressed as much as I can etc — Steve Brown, Dec 16 '13 at 00:25
Incidentally does anyone know why my question got voted down? No one has asked for clarification or completely answered it so assume it was reasonably clear and not a silly question. I'm new to this forum so want to improve... — Steve Brown, Dec 16 '13 at 00:28

score 1 · Accepted Answer · answered Jan 08 '14 at 12:02

I got this to work in the end by running a script in the child HTML document to detect the image load. This then triggers a 'fade function' in the parent document which fades up the containing iFrame.

  <script type='text/javascript'>
    var img = new Image();
    img.onload = function(){
        window.parent.fadeFn();
    }
    <?php echo"img.src='".$fileNameVar."'"?> 
  </script>

Tasos Bitsios · Answer 2 · 2013-12-15T14:31:48.513

0

EDIT: this is incorrect, I was confused The load event is fired when the DOM is fully loaded, but that doesn't include external images.

You should be able to do what you want with the ready() event:

//no reason to run the jQuery selector multiple times
var creativeIframe = $("#creativeiframe"); 

//fade up iFrame once content loaded
creativeIframe.ready(function() {
        creativeIframe.fadeIn(300);
});

edited Dec 15 '13 at 14:31

answered Dec 15 '13 at 12:55

Tasos Bitsios

2,699
1
16
22

Isn't it the other way round? http://api.jquery.com/ready/ "In cases where code relies on loaded assets ... the code should be placed in a handler for the load event instead." Also .ready() can only be called on a jQuery object matching the current document, which the iFrame content isn't. – Steve Brown Dec 15 '13 at 13:56
Have tried it none the less, but .ready() never seems to trigger at all - even when the image is loaded. Good point about my multiple calling of the jQuery selector though, thanks. – Steve Brown Dec 15 '13 at 13:59

score 0 · Answer 3 · answered Dec 15 '13 at 12:58

0

There is also a .load() function in the img tag, which can be used to show whether the image is fully loaded or not.

So I think you can use the .load() function to enable/disable the iframe click.

Or show an waiting indicator, maybe better.

answered Dec 15 '13 at 12:58

Sho

294
1
5

Thanks Sho - are you suggesting running a script in the child html page to detect if the image is loaded? Any idea how I could get to trigger the fadeIn on the parent iFrame? – Steve Brown Dec 15 '13 at 14:02
You could show the iframe and apply the display:none to its contents, removing it(/fading in) when img has loaded – Tasos Bitsios Dec 15 '13 at 14:30
Thanks I'll try this as a work around but its not ideal as the loading animation is behind the iFrame (it doesn't make sense to put it inside the iFrame as there are several different HTML 'templates' which get loaded in so it would mean duplicating in all of these). I'm still curious as to why the preloading is breaking something which was working before... – Steve Brown Dec 16 '13 at 00:32
Just a suggestion. Do you mind show a "loading" indicator or preview image at first, then in the img load event replace the preview image with the real img? A preview img means a small image of the big artwork like an thumbnail. Another question: May I ask why are you using an iFrame to show the image? I think we can use just a div to hold all the art work. Because we need more process to handle DOM elements inside an iFrame. – Sho Dec 16 '13 at 12:52
Hi Sho, the site does use thumbnails which the user clicks to load the artwork in the iFrame. A loading indicator currently sits behind the iFrame and is visible until the iFrame fades in. I'm using an iFrame since the artworks are web designs and the site is responsive - the iFrame solution presents an easy way to make the artworks responsive too, with background images and scrolling etc. Also some of the artworks are SWFs. The site is at www.sjbdigital.co - might make things clearer! It's not finished so the code is a little disorganised... – Steve Brown Dec 17 '13 at 09:09
Very impressive! For me, I think your website is good enough. :) Good luck! – Sho Dec 17 '13 at 12:10
Thanks for the complement Sho! I got this working in the end - have provided an update below for anyone interested. – Steve Brown Jan 08 '14 at 11:57

iFrame .load event not waiting for preloading images to finish

3 Answers3