Javascript：图像加载太慢

我有一系列的图像，我从中创建对话框

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

//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.logimage.width将等于0，但console.logimage.src将是正确的

---

是否有办法暂停脚本的其余部分，直到图像加载完image.src之后的所有内容？

您可以在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;

---

在某些情况下，ie使用onload事件可能会有问题-请参阅此处的注释：-即使图像是用代码创建的，如果它已经缓存，也可能不会触发。这可能只适用于IE6-7

因此，除此之外，您还应该首先检查它是否已完成加载，然后再使用naturalWidth和complete for old IE属性绑定事件。在加载图像之前，将不定义自然宽度和高度

我可以设想一个竞争条件，如果您首先检查它是否已加载，然后如果未加载，则绑定onload事件，但在这两个操作之间，图像完成加载。考虑到JS的单线程特性，我不确定这是否可行，但由于图像是异步加载的，也许是这样

---

在我遇到类似问题的项目中，我只需检查图像是否已加载，如果未加载，则设置一个超时以再次调用该函数，这样它将一直尝试，直到加载为止。这将避免任何可能的争用条件。

这就是为什么以后需要设置src属性的原因。根据该页面的评论，至少在IE7中，这并不重要，如果浏览器缓存了它，它就不会启动。请看下面的IE7解决方案：其中一个答案与我建议的测试和使用超时几乎相同，这就是你的意思吗？被接受的一个是不相关的。是的！我指的是尤伊人