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

在没有加载的情况下查找图像大小

1 个答案: