Jquery 从<；检索宽度（）和高度（）信息；img>；通过html（）加载

我的问题如下：我开发了一个脚本，允许用户放大当前页面上显示的图像。单击后，它通过

$（'div#imageBox'）.html（）加载
和
）；
var marginLeft=$（'DIV#imageBox DIV'）.width（）/2；
var marginTop=$（'DIV#imageBox DIV'）.height（）/2；
var hauteur=$（'DIV#imageBox IMG'）。高度（）；
var largeur=$（'DIV#imageBox IMG'）.width（）；
var bottom=$（'DIV#imageBox SPAN'）.height（）；
//警惕（边缘左侧+'/'+边缘顶部+'/'+傲慢+'/'+较大+'/'+底部）；
如果（legende）
$（'DIV#imageBox'）。查找（'DIV'）。追加（''+legende+''）；
如果（大小时>$（窗口）.width（））
宽=$（窗口）.width（）*0.8；
如果（hauteur>$（窗口）.height（））
豪特=$（窗口）.height（）*0.8；
//“新世界杯”将重新确定汽车的总体尺寸
$（'DIV#imageBox IMG'）.hide（）.height（傲慢）；
largeur=$（'DIV#imageBox IMG'）.width（）；
马金托普=傲慢/2；
marginLeft=largeur/2；
如果（！$（'DIV#imageBox IMG'）。是（':animated'））{
$（'DIV#imageBox IMG'）.show（）.height（0）.animate（{'height'：hauteur}，300）；
$（'DIV#imageBox SPAN'）.width（0）.animate（{'width'：largeur-10}，300）；
}
$（'DIV#imageBox DIV'）.css({
"最高":"50%",，
“左”：50%，
‘marginTop’：‘-’+（marginTop）+‘px’，
“marginLeft”：“-”+（marginLeft）+“px”
});
$（'DIV#imageBox SPAN'）.css（'bottom'，'-'+bottom+'px'）；
$（'DIV#imageBox SPAN:before'）.css（'top'，auteur）；
}

如果你有任何问题，不要犹豫。我可能没有我希望的那么清楚。
因为您已经有了图像源，可以使用它创建图像元素并执行
onload
事件所需的代码

function imageBox(src, legende)
{

    $('DIV#imageBox').empty().fadeIn().html('<div><a href="'+src+'" target="_blank"><img src="'+src+'" /></a></div>');

    var marginLeft = $('DIV#imageBox DIV').width() / 2;
    var marginTop = $('DIV#imageBox DIV').height() / 2;
    var hauteur = $('DIV#imageBox IMG').height();
    var largeur = $('DIV#imageBox IMG').width();
    var bottom = $('DIV#imageBox SPAN').height();

    //alert(marginLeft+'/'+marginTop+'/'+hauteur+'/'+largeur+'/'+bottom);

    if(legende)
        $('DIV#imageBox').find('DIV').append('<span>'+legende+'</span>');

    if(largeur > $(window).width())
        largeur = $(window).width() * 0.8;

    if(hauteur > $(window).height())
        hauteur = $(window).height() * 0.8;

    // Récupération des nouvelles valeurs au cas où l'image soit redimensionné car trop grande
        $('DIV#imageBox IMG').hide().height(hauteur);
        largeur = $('DIV#imageBox IMG').width();
        marginTop = hauteur / 2;
        marginLeft = largeur / 2;


    if(!$('DIV#imageBox IMG').is(':animated')) {
        $('DIV#imageBox IMG').show().height(0).animate({'height': hauteur}, 300);
        $('DIV#imageBox SPAN').width(0).animate({'width': largeur-10}, 300);
    }

    $('DIV#imageBox DIV').css({
        'top': '50%',
        'left': '50%',
        'marginTop': '-'+(marginTop)+'px',
        'marginLeft': '-'+(marginLeft)+'px'
    });
    $('DIV#imageBox SPAN').css('bottom', '-'+bottom+'px');
    $('DIV#imageBox SPAN:before').css('top', hauteur);


}

函数图像框（src，legende）{
$（'DIV#imageBox'）.empty（）.fadeIn（）.html（“”）；
var img=document.createElement（“img”）；
img.onload=函数（）{
var imgW=this.width；//图像宽度
var imgH=this.height；//图像高度
//做任何其他需要的事
};
img.src=src；
//正如Archer所建议的，即使使用缓存的图像也要触发加载
如果（img.complete）$（img.load（）；
}
是
$（document）.ready（function（）{
）中的代码吗？不是。因为问题是这个函数在检索信息之前加载一个未完全加载的图像。此外，我发现将一个函数放入
$（document）.ready（function（）中很奇怪{
但我可能错了。您是从
$（文档）内部调用该函数的。准备好了吗
？如果（img.complete）$（img.load（）；
它会导致
onload
处理程序为缓存的图像触发；）@Patrick Evans>太棒了！！您的脚本工作和行为完全符合预期。非常感谢。@Archer>添加
if（img.complete）$（img.load（））
最后会使脚本失败。我应该将它放在
img.src=src；
之前还是之后？你是什么意思导致它失败？你在控制台或其他地方收到错误消息吗？@user2788131应该是在分配
src
之后，就像上面的代码一样。我刚刚测试过它，它对我来说工作正常。我不需要它f它会导致问题，但您可能会发现缓存图像的进一步问题。@PatrickEvans没有控制台消息，但会显示一个0x0的图像，因为它的内联样式
显示设置为
none
。
function imageBox(src, legende) {
   $('DIV#imageBox').empty().fadeIn().html('<div><a href="'+src+'" target="_blank"><img src="'+src+'" /></a></div>');
   var img = document.createElement("img");
   img.onload = function() {
      var imgW = this.width; //Images width
      var imgH = this.height; //Images height
      //Do whatever else is needed
   };
   img.src = src;
   //As suggested by Archer, to trigger load even with cached images
   if (img.complete) $(img).load();
}