Get image width after an upload Javascript [works on firefox but not chrome]

Question

Hello I am trying to get an image width after an upload using javascript, I also need to calculate the ratio between the previous width and the new one because of the css. "imageatraiter" is the image. I wrote this code :

function taille_image(){
    var largeurImage = document.getElementById("imageatraiter").width;
    var sheet = window.document.styleSheets[1];
    sheet.insertRule('@media (min-width: 768px) {  .imageatraiter {    width: 750px;  }}', sheet.cssRules.length);
    sheet.insertRule('@media (min-width: 992px) {  .imageatraiter {    width: 970px;  }}', sheet.cssRules.length);
    sheet.insertRule('@media (min-width: 1200px) {  .imageatraiter {    width: 1170px;  }}', sheet.cssRules.length);
    var coeff = largeurImage/document.getElementById("imageatraiter").width;
    console.log(largeurImage);
    console.log(coeff);
    return coeff;
}

It works almost on firefox, ( I need to refresh the first time) but on google chrome the width seems to be the previous 's one.

If you have any questioned feel free to ask, and I hope someone will help me thx.

Edit : The upload as asks in comments

$('#input-700').on('fileuploaded', function(event, data, previewId, index) {
    //filename = replaceAll(data.files[index]['name'], '_', '-');
    filename = data.files[index]['name'];
    filename = filename.substr(0, filename.lastIndexOf('.'));//on enlève l'extension qui est apres le dernier '.'
    path = 'uploads/'+filename+'.jpg';
    $('#'+previewId).children().attr("src",path);//on charge l'image jpg en preview
    $("#imageatraiter").attr("src",path);//on charge l'image jpg pour le traitement

   // enable();//on enlève toutes les classes "disabled" pour pouvoir appliquer des opérations à l'image
    var sheet = window.document.styleSheets[1];
    sheet.deleteRule(sheet.cssRules.length-1);
    sheet.deleteRule(sheet.cssRules.length-1);
    sheet.deleteRule(sheet.cssRules.length-1);
   // var largeurImage = "<?= $_SESSION['width'] ?>";
    coeffImage = taille_image();// On reapplique les tailles jolies en css pour l'image et on calcul le coefficient
   // console.log(largeurImage);
});

Answer 1

The problem seems to be that on webkit browser such as chrome or opera, the css and the javascript is loading pretty much simultaneously. That is explaining why sometimes it doesn't work and after a few refreshs it works again.

The solution is to wait that this image is fully loaded and then apply some css.

imageatraiter.onload = function(){console.log("I've been updated, you can do your fancy things with my new width and height")}