Question

我创建了一个灯箱，可以在单击图像（一次一个）时从图库中加载图像。问题是图像没有加载，因此图像的尺寸是未知的。这是代码：

function showimage(image_path) {
    imgobj = new Image();
    imgobj.src = image_path;
    var aspectratio = imgobj.width/imgobj.height;
    var newht = imgobj.height;
    var newwd = imgobj.width;
    if (($(window).height() - 100) < newht) {
        newht = $(window).height() - 100;
        newwd = newht*aspectratio;
    }
    if (($(window).width() - 100) < newwd) {
        newwd = $(window).width() - 100;
        newht = newwd/aspectratio;
    }
    $('#lightbox img').attr('height', newht);
    $('#lightbox img').attr('width', newwd);
    $('#lightbox').show();
}

我尝试使用onLoad，但是会立即触发，图像仍未加载，并且没有提供正确的图像尺寸。 Here我读到，当图像已经在浏览器中加载时，会立即调用onLoad。

其他人建议使用时间延迟“setTimeout”，但这似乎不是一个好的解决方案，因为图像可能有不同的大小，并且可能需要不同的时间来加载。

可以建议我如何解决这个问题。

编辑1：

感谢下面的答案，我能够使用load（）获得功能。但是现在如果图像已经加载并且已经在灯箱中显示，则再次单击。 load（）中的函数不会被调用，也不会出现灯箱。有什么建议吗？

编辑2：

解决方案：这对我有用：

function showimage(image_path) {
    imgobj = new Image();
    imgobj.src = image_path;
    if (imgobj.complete == false)
        $(imgobj).load(function(){processimage(imgobj);});
    else
        processimage(imgobj);
}

function processimage(imgobj) {
    var aspectratio = imgobj.width/imgobj.height;
    var newht = imgobj.height;
    var newwd = imgobj.width;
    if (($(window).height() - 100) < newht) {
        newht = $(window).height() - 100;
        newwd = newht*aspectratio;
    }
    if (($(window).width() - 100) < newwd) {
        newwd = $(window).width() - 100;
        newht = newwd/aspectratio;
    }
    $('#lightbox img').attr('height', newht);
    $('#lightbox img').attr('width', newwd);
    $('#lightbox').show();
}

Answer 1

如果您总是想要访问图像的高度和宽度，您可以采用不同的方法并使用jquery hide()和show()函数。

这样，图像将始终被加载，您只能在单击图像时显示它们，从而为用户提供加载的幻觉，并让您可以访问高度和宽度。

Answer 2

我认为你的函数的问题在于你在函数中创建了一个新的图像对象，然后在其中添加了路径，但实际的图像从未加载到那一点。你想要做的是设置对象，添加路径，然后加载它：

   function showimage(image_path) {
        imgobj = new Image();
        imgobj.src = image_path;
        //load the image:
        $(imgobj).load(function(){
           var aspectratio = imgobj.width/imgobj.height;
           var newht = imgobj.height;
           var newwd = imgobj.width;
           if (($(window).height() - 100) < newht) {
               newht = $(window).height() - 100;
               newwd = newht*aspectratio;
           }
           if (($(window).width() - 100) < newwd) {
              newwd = $(window).width() - 100;
              newht = newwd/aspectratio;
           }
           $('#lightbox img').attr('height', newht);
           $('#lightbox img').attr('width', newwd);
           $('#lightbox').show();
        });
    }

小提琴演示：http://jsfiddle.net/5d7mM/

Answer 3

这对我有用。我正在重复使用图像对象。

$(document).ready(function () {
    var imgobj = new Image();
    function showimage(image_path) {
        imgobj.src = image_path;
        if (imgobj.complete == false)
            $(imgobj).load(function(){processimage(imgobj);});
        else
            processimage(imgobj);
    }

    function processimage(imgobj) {
        var aspectratio = imgobj.width/imgobj.height;
        var newht = imgobj.height;
        var newwd = imgobj.width;
        if (($(window).height() - 100) < newht) {
            newht = $(window).height() - 100;
            newwd = newht*aspectratio;
        }
        if (($(window).width() - 100) < newwd) {
            newwd = $(window).width() - 100;
            newht = newwd/aspectratio;
        }
        $('#lightbox img').attr('height', newht);
        $('#lightbox img').attr('width', newwd);
        $('#lightbox').show();
    }
});

图像onload立即触发

3 个答案: