jquery - 在不加载图像的情况下查找图像大小

Question

我已经为缩略图的大版本创建了一个简单的模式窗口，以定位我需要的图像大小的图像中心屏幕。我试过 .load 但似乎无法正常工作 - 在第二次单击时，它可以正常工作，因为图像已加载，不幸的是宽度和高度为 0。

$(function(){
$(".quickImg").click(function(){ 
    var imageSrc = 'images/'+$(this).attr('rel')+'/'+$(this).attr('href').replace('#', '')+'_full.jpg';
    var imgSize = new Image(); 
    imgSize.src = imageSrc;
IMAGE LOADING HERE
    var imgW = imgSize.width,imgH = imgSize.height;
    var imgDiv='<div id="qrBlock"></div><div id="newsModal" style="margin-left:-'+imgW/2+'px;margin-top:-'+imgH/2+'px"><a href="#" title="Close Window" class="closeQR">X</a><img src="'+imageSrc+'" width="'+imgW+'" height="'+imgH+'" /></div>'
    $('body').append(imgDiv);
});
});

Answer 1

您应该等待图像加载以获取其宽度和高度。首先，您必须将onload事件附加到图像并在加载图像时执行回调：

   $(function(){
        $(".quickImg").click(function(){ 
            var imageSrc = 'images/'+$(this).attr('rel')+'/'+$(this).attr('href').replace('#', '')+'_full.jpg';
            var imgSize = new Image(); 
            imgSize.onload = function(){
                var imgW = this.width,
                    imgH = this.height,
                    imgDiv = '<div id="qrBlock"></div><div id="newsModal" style="margin-left:-'+imgW/2+'px;margin-top:-'+imgH/2+'px"><a href="#" title="Close Window" class="closeQR">X</a><img src="'+imageSrc+'" width="'+imgW+'" height="'+imgH+'" /></div>';
                    $('body').append(imgDiv);
            }

            imgSize.src = imageSrc;
        });
    });