CODEWITHSUNDEEP
javascriptjqueryhtmliframefancybox
edgarmtze
edgarmtze

Reputation: 25048

Preload fancybox images iframe with jQuery

I have an iframe that holds a gallery. In my main webpage I have an image and when clicked, it opens "that" iframe with fancybox.

The code is like this:

<a class="fancybox fancybox.iframe popup" href="http://tambooflores.com.mx/iframe_colores.html" height="100%" width="100%" > 

some IMAGE here
</a>

The script for fancybox is:

 $('.fancybox').fancybox();

    $("a.popup").fancybox({
        'hideOnContentClick' : true,
        'width' : 676,
        'height' : 630,
        'type' : 'iframe',
        'padding' : 16,
        'onComplete' : function() {
            $('#fancybox-frame').load(function() { // wait for frame to load and then gets it's height

            $('#fancybox-content').height($(this).contents().find('body').height()+30);
        });
    }
    });

The issue is that I have 8 iframes with 8 different galleries (with 20 images each). When I click any of them, it is taking so long to show.

So I was thinking to load maybe half of the images when loading the main web page.

I was also thinking of adding this in each iframe:

The content of IFrame
<script type="text/javascript">
//<![CDATA[
   fireOnReadyEvent();
   parent.IFrameLoaded();
//]]>
</script>

Please take a look at the fiddle 1. How to minor time of loading? 2. How to improve loading or how to load half of images in load function?

Upvotes: 0

Views: 2003

Answers (1)

codebear22
codebear22

Reputation: 1877

I was having the same problem. I resolved in this way:

Get the image sizes (height or width) that is going to load and put this result variable as a div height or width value. And that's all.

Upvotes: 1

Related Questions