图像加载立即触发

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