Hauteur de l'élément inconnue avant le rendu dans IE6; comment résoudre?

Question

J'ai créé un script lightbox. Un problème de javascript demeure et cela me rend fou.

La source se trouve à http://github.com/Wolfr/Wolf-lightbox

Dans IE6, lorsque vous cliquez sur l'image, la position de la boîte modale est erroné la première fois que vous cliquez sur le modal. Si vous le fermez et cliquez à nouveau, le modal est positionné correctement.

Je crois que cela est dû à IE6 ne connaissant pas encore les dimensions de l'image insérée. Par exemple. la première fois que vous ouvrez une session modalHeight il pourrait être quelque chose comme 51, la prochaine fois que 500 (le modal a « grandi » car il y a une image maintenant ").

quelqu'un a des idées? Coincé ici!

function positionBox() { 

    // initialize object references 
    var oElement = $('.modal'); 
    var oWindow = $(window); 

    // calculate offset 
    var offsetLeft = parseInt((oWindow.width() - oElement.width())/2); 
    var offsetTop = parseInt((oWindow.height() - oElement.height())/2); 

    var modalWidth = parseInt(oElement.width()); 
    var modalHeight = parseInt(oElement.height()); 

    oElement.css('left', offsetLeft) 
    .css('top', offsetTop) 
    .css('width', modalWidth) 
    .css('height', modalHeight) 
    .css('position', 'fixed'); 

    // IE6 should use position: absolute; since fixed is not supported 
    if($.browser.msie && $.browser.version =='6.0') { 
    oElement.css('position', 'absolute') 
      .css('top', offsetTop + oWindow.scrollTop()); 
    } 

} 

Answer 1

vous pouvez essayer de créer l'élément que vous voulez taille hors écran (par ex. position:absolute; left:-10000px), faites votre décalage CALC puis rabattez l'écran.

Answer 2

une autre option est de faire un $img.bind("load", ...) pour mettre en place un rappel pour redessiner la fenêtre lorsque l'image se charge, mais IE se comporte un peu bizarrement lorsque l'image est déjà mise en cache et le rappel de chargement n jamais allumé. Vous devez faire quelque chose comme

$img.bind("load", function() { 
    redraw(); 
}); 

if ($.browser.msie) { 
    if ($img[0].complete) { 
    redraw(); 
    } 
}