Question

我有一组图像，我从中创建对话框。

我需要知道图像的宽度，以使其成为对话框的宽度。

//Used to get dimensions of image
var image = new Image();

//Set Image
image.src = ImageArray[currentImageVal + direction].src;

//Get direction to move photos
switch (direction) {
    case 1:
        //Set current val
        currentImageVal = currentImageVal + 1;
        break;
    case -1:
        //Set current val
        currentImageVal = currentImageVal - 1;
        break;
}

//Set image
$('DialogImagesBig').attr('src', ImageArray[currentImageVal].src);
//Set new current image
CurrentDialogImage = ImageArray[currentImageVal].src;

console.log(image.src);
console.log(image.width);

//Check if it is less than 450
if (image.width < 450) {
    //Adjust css
    $('.ui-dialog').css('width', image.width + 50);
    //Edit dialog position
    $('.ImageDialogDiv').dialog("option", "position", 'center');
} else {
    //Normal width
    $('.ui-dialog').css('width', '500');
    //Edit dialog position
    $('.ImageDialogDiv').dialog("option", "position", 'center');
}

问题在于，图片不会及时加载（console.log(image.width)将等于0，但console.log(image.src)将是正确的）。

有没有办法暂停脚本的其余部分，直到加载图片（image.src之后的所有内容）？

Answer 1

您可以在img.onload函数中附加其余代码。这将在图像加载时被调用。

确保在此函数声明后设置image.src。

image.onload = function () {
    if (image.width < 450) {
        //Adjust css
        $('.ui-dialog').css('width', image.width + 50);
        //Edit dialog position
        $('.ImageDialogDiv').dialog("option", "position", 'center');
    } else {
        //Normal width
        $('.ui-dialog').css('width', '500');
        //Edit dialog position
        $('.ImageDialogDiv').dialog("option", "position", 'center');
    }
}

image.src = ImageArray[currentImageVal + direction].src;

Answer 2

使用onload事件可能会有问题，例如，在某些情况下 - 请参阅此处的注释：http://msdn.microsoft.com/en-us/library/cc197055(v=vs.85).aspx - 即使图像是在代码中创建的，如果它已经被缓存，也可能不会触发。这可能仅适用于IE6-7。

因此，除了这样做之外，在使用naturalWidth和complete（对于旧IE）属性绑定事件之前，应首先检查它是否已完成加载。 <{1}}（和高度）将被定义，直到图像加载完毕。

如果先检查是否已加载，我可以设想竞争条件，如果没有，则绑定“onload”事件，但在这两个动作之间，图像完成加载。鉴于JS的单线程特性，我不确定这是否可行，但由于图像是异步加载的，也许它是。

在我遇到类似问题的项目中，我只会检查图像是否已加载，如果没有，请设置超时以再次调用该函数，因此它会一直尝试直到加载完毕。这样可以避免任何可能的竞争条件。

Javascript：图片加载速度太慢

2 个答案: