Précharger des images fancybox iframe avec jQuery

Question

J'ai un iframe qui contient une galerie. Dans ma page Web principale j'ai une image et quand cliqué, il ouvre "cela" iframe avec fancybox.

Le code est comme ceci:

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

some IMAGE here 
</a> 

Le script pour fancybox est:

$('.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); 
     }); 
    } 
    }); 

Le problème est que je 8 iframes avec 8 galeries différentes (avec 20 images chaque). Quand je clique sur l'un d'eux, cela prend tellement de temps à montrer.

Donc je pensais charger peut-être la moitié des images lors du chargement de la page web principale.

Je pensais aussi à ajouter ceci dans chaque iframe:

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

S'il vous plaît prendre un look at the fiddle 1. Comment le temps de chargement mineur? 2. Comment améliorer le chargement ou comment charger la moitié des images dans la fonction de chargement?

Answer 1

J'avais le même problème. Je résolus de cette façon:

Obtenez les tailles d'image (hauteur ou largeur) qui va charger et mettre cette variable de résultat comme une valeur div hauteur ou largeur. Et c'est tout.