上传Javascript后获取图像宽度[适用于firefox，但不适用于chrome]

您好，我正在尝试在使用javascript上传后获得图像宽度，由于css的原因，我还需要计算以前的宽度与新宽度之间的比率。“ImageAtriter”就是图像。 我写了这段代码：

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;
}

它几乎可以在firefox上使用（我需要第一次刷新），但在google chrome上，它的宽度似乎是以前的宽度

如果您有任何疑问，请随时提问，我希望有人能帮助我

编辑：按评论中的要求上传

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

$（'input-700'）。在（'fileupload'，函数（事件、数据、预览、索引）上{
//filename=replaceAll（data.files[index]['name']、''、'-'）；
filename=data.files[索引]['name']；
filename=filename.substr（0，filename.lastIndexOf（'.'）；//关于enlève l'extension qui est apres le dernier'
路径='uploads/'+filename+'.jpg'；
$（'#'+previewId）.children（）.attr（“src”，path）；//收费l'image jpg en预览
$（“#imageatrater”）.attr（“src”，path）；//收费l'image jpg pour le traitement
//enable（）；//在enlève toutes上，“禁用”pouvoir Appriquer des opérationsél’image
var sheet=window.document.styleSheets[1]；
活页删除规则（活页cssRules.长度-1）；
活页删除规则（活页cssRules.长度-1）；
活页删除规则（活页cssRules.长度-1）；
//var largeurImage=“”；
coeffImage=taille_image（）；//关于重新液化les tailles jolies en css关于计算系数的图像et
//console.log（largeurImage）；
});

根据斯大林的评论，您需要将函数调用包装在window.onload事件中。您可以将以下代码直接添加到html或.js文件中。（Jsut删除脚本标记）

window.onload=函数（）{
taille_图像（）
};

---

根据斯大林的评论，您需要将函数调用包装在window.onload事件中。您可以将以下代码直接添加到html或.js文件中。（Jsut删除脚本标记）

window.onload=函数（）{
taille_图像（）
};

---

问题似乎在于，在诸如chrome或opera之类的webkit浏览器上，css和javascript几乎同时加载。这就解释了为什么有时候它不起作用，几次刷新后又能起作用

解决方案是等待此图像完全加载，然后应用一些css

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

---

问题似乎在于，在诸如chrome或opera之类的webkit浏览器上，css和javascript几乎同时加载。这就解释了为什么有时候它不起作用，几次刷新后又能起作用

解决方案是等待此图像完全加载，然后应用一些css

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

---

您需要等待图像的加载事件，以确定如何执行该操作？

imageatriter.onload=function（）{console.log（“我已经更新了，您可以使用我的新宽度和高度来完成您喜欢的事情”）}

如果您多次更新，只附加一次此事件处理程序就足够每次调用所附加的函数了。到目前为止，似乎可以工作，但我无法相信这么简单的事情可以工作，因为我测试了所有答案：，但没有一个对我有效！您需要等待图像的加载事件，以确定如何执行该操作？

imageatriter.onload=function（）{console.log（“我已经更新了，您可以使用我的新宽度和高度来完成您喜欢的事情”）}

如果您多次更新，只附加一次此事件处理程序就足够每次调用所附加的函数了。到目前为止，似乎可以工作，但我无法相信这么简单的事情可以工作，因为我测试了所有答案：，但没有一个对我有效！很难说清楚，因为问题还不完全清楚，但我认为OP需要等待第二张图像加载，而不是窗口加载。@StephenThomas-我认为你是对的。OP-可能在上载函数中放置回调？你能分享上传的代码吗？（如果您通过ajax发送图像，您可以将函数调用放入.success of the ajax call callback中。我不确定windows.load是否正确，因为只有图像被重新加载。对不起，Rastalamm什么是回调？我正在编辑问题以供您查看上传，很难说清楚，因为问题并不完全清楚，但我认为OP需要等待第二个图像被加载，而不是窗口被加载。@StephenThomas-我认为你是对的。OP-可能在上载函数中放置一个回调函数？你能分享上传的代码吗？（如果您通过ajax发送图像，您可以将函数调用放入.success of the ajax call callback。我不确定windows.load是否成功，因为只有图像被重新加载。对不起，Rastalamm什么是回调？我正在编辑问题以供您查看上载请添加更多详细信息这是如何解决问题的。请添加更多详细信息如何解决问题。）就是解决问题。