Retailler div apres chargement image

Signaler
Messages postés
28
Date d'inscription
jeudi 2 janvier 2003
Statut
Membre
Dernière intervention
27 mai 2010
-
Messages postés
1796
Date d'inscription
vendredi 9 mai 2008
Statut
Modérateur
Dernière intervention
17 septembre 2021
-
Bonjour,

Voilà mon problème, j'ai une lightbox que j'affiche, dans cette lightbox j'ai une image qui se charge.
J'ai une fonction javascript qui me permet de centrer le div correspondant à lightbox automatiquement en fonction des tailles de cette lightbox. Voici son contenu :
function centrerDiv(divId) {
    var margeLeft = $("#" + divId).width() / 2;
    var margeTop = $("#" + divId).height() / 2;
    $("#" + divId).css({ "top": "50%", "left": "50%", "margin-left": "-" + margeLeft + "px", "margin-top": "-" + margeTop + "px" });
}


J'appel cette fonction centrerDiv dans ma page lightbox :
<script type="text/javascript">
    $(document).ready(function() {
        centrerDiv("boxNouvelle");      
    });
</script>


Le problème est que lorsque la function centrerDiv est executée, l'image n'est pas forcement encore chargée, donc il centre en fonction de la taille actuelle du div, et pas la taille finale du div, du coup elle n'est pas bien centrée une fois l'image chargée.

Ma question est donc, comment faire pour appeler ma function seulement apres que mon image soit chargée

nb: la source de l'image est initialisé dans le code behind de ma page, donc je ne peux pas faire de
var monImageJS = new Image; 
monImageJS.onload = function(){ 
document.getElementById('monImageDOM').src = monImageJS.src; 
centrerDiv("boxNouvelle");
}

1 réponse

Messages postés
1796
Date d'inscription
vendredi 9 mai 2008
Statut
Modérateur
Dernière intervention
17 septembre 2021
134
et comme sa en mettant monImageJS qui doit normalement contenir la hauteur et la largeur de l'image

function centrerDiv(divId) {
    var margeLeft = $("#" + monImageJS).width() / 2;
    var margeTop = $("#" + monImageJS).height() / 2;
    $("#" + divId).css({ "top": "50%", "left": "50%", "margin-left": "-" + margeLeft + "px", "margin-top": "-" + margeTop + "px" });
}