Question

想知道是否有人可以提供帮助。

bascially在javascript中我试图在图像加载到页面之前抓取图像的图像大小，因此我可以在库中动态调整一些缩略图。

路径工作正常，预加载器工作正常，我可以看到宽度＆amp;在getWidthAndHeight函数中抓取高度。

我的问题是，我正在尝试将其分配给全局变量以在其他函数中使用，但全局变量在getWidthAndHeight函数之外丢失。（我在文件的开头声明了全局变量，例如var gwidth）

我已经想过，当我把警报（gwidth）卡在那里时，一切都有效！ obvioulsy我没有关闭警报框 - 任何想法为什么只有当警报在那里时才有效，以及为什么全局可能在警报被禁用时失去其价值？

由于

function getWidthAndHeight() {
    gwidth = this.width;
    alert(gwidth);
    gheight = this.height;  
    return true;
}
function loadFailure() {
    alert("'" + this.name + "' failed to load.");
    return true;
}




function getImgSize(gim_imgSrc)
{

var myImage = new Image();

myImage.name = gim_imgSrc;
myImage.onload = getWidthAndHeight;
myImage.onerror = loadFailure;
myImage.src = gim_imgSrc;

getWidthAndHeight(myImage);
alert("width is" + gwidth);
alert(testglobal);

return gwidth;

}

Answer 1

Globals are evil。使用closures。

var getImgSize = (function() {
    var gwidth, gheight;
    function getWidthAndHeight() {
        gwidth = this.width;
        alert(gwidth);
        gheight = this.height;  
        return true;
    }
    function loadFailure() {
        alert("'" + this.name + "' failed to load.");
        return true;
    }

    return function (gim_imgSrc) {
        var myImage = new Image();

        myImage.name = gim_imgSrc;
        myImage.onload = getWidthAndHeight;
        myImage.onerror = loadFailure;
        myImage.src = gim_imgSrc;

        getWidthAndHeight(myImage);
        alert("width is" + gwidth);
        alert(testglobal);

        // this probably won't work
        return gwidth;
    };
})();

还存在一个问题，即图像加载是异步的（即当getImgSize返回时，图像可能没有加载）。任何依赖于getImgSize返回值的代码都应该转换为回调。

function getImgSize(gim_imgSrc, didLoad, didntLoad) {
    var myImage = new Image();

    myImage.name = gim_imgSrc;
    myImage.onload = function() {
        // you don't really need this
        //getWidthAndHeight.call(myImage); 
        // the following should be enough
        return didLoad(myImage, myImage.width, myImage.height);
    };
    myImage.onerror = function() {
        return didntLoad(myImage);
    }
    myImage.src = gim_imgSrc;
}

Answer 2

它无法正常工作，因为图像onload事件是异步触发的（即可能在您返回gwidth后）。它在您发出警报时正常工作，因为您停止执行几秒钟，从而使图像有时间加载。

您可以尝试传递回调函数：

function getImgSize(gim_imgSrc, callback) {
    var myImage = new Image();
    myImage.src = gim_imgSrc;
    myImage.onload = function() {
        getWidthAndHeight();
        callback(gwidth);
    };
}

在功能上失去全球价值

2 个答案: