获取图像的高度以设置模式窗口大小

Moxie C 发表于 Dev

Moxie C

我正在创建带有缩略图的照片库，并将调整大小后的图像加载到模式窗口中。

问题是我想获取图像的高度和宽度以设置模态窗口的高度，但是未在模态窗口或图像容器中设置高度。

图像的src最初不在我的标记中，但我通过动态添加将其添加到标记中。

原始缩略图图像

    <img src="\images\picture1.jpg" height="150" width="150" id="thumbnail">

jQuery代码：

    var tImageID    = $(this).find('img').attr( 'id', 'thumbnail' );
    var fullURL     = $(tImageID).attr('src');
    var dFigure     = $('#dialog-media figure .media');

    //  fullSrcURL  = "\images\picture_resized.jpg"
    var fullSrcURL = fullURL.replace(".jpg", "_resized.jpg"); 


    // Add html to the div tag
    $(dFigure).append('<img id="resized-pic" src="' + fullSrcURL + '" alt="' + $(tImage).attr('alt') + '" />');


     var objHeight = $("#resized-pic").height();
     var objWidth  = $("#resized-pic").width();

     // Perform some other code here
     // Some more logic

     //Set the positioning of the modal window with theses CSS properties
     $('.ui-dialog').css('left', '0');
        $('.ui-dialog').css('right', '0');
        $('.ui-dialog').css('margin', '0 auto');
        $('.ui-dialog').css('width', objWidth);
        $('.ui-dialog').css('height', ObjHeight);   
        $('.ui-dialog').css('top', '5%');

图片已加载，但是在查看萤火虫时objWidth和objHeight显示为零。

我刷新页面，单击相同的缩略图，图片加载了模态内的图像，模态的高度已正确设置。

是因为图片没有完全加载，这就是为什么它为零吗？还是因为它被缓存了？

谢谢

干杯

Moxie C

@特雷弗

我发现我需要以下代码：

        image= new Image();
        image.onload = onLoadHandler;  // Checks to ensure the image has been loaded
        image.src=fullSrcURL;

        function onLoadHandler() {

           //Put in logic here once the image has been loaded

        }

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。