2

我的问题如下：我开发了一个脚本，允许用户放大当前页面上显示的图像。$('div#imageBox').html()单击时，它会通过a<div>和a加载<img>。在下面，我正在检索一些信息，例如加载图像的width和height。

有时有效，有时无效。我知道存在 DOM 加载问题，但奇怪的是我无法弄清楚为什么有时它会起作用而它却不起作用。由于of ，它加载了 a<div>的0x19px大小。<img>0x0

这是我的 jQuery 代码：

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


}

如果您有任何问题，请不要犹豫。我可能没有我希望的那么清楚。

4

1 回答 1

1

由于您已经拥有图像源，因此可以使用它来创建图像元素并执行onload事件所需的代码

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();
}
于 2013-09-17T15:03:00.920 回答