Javascript: изображения загружаются слишком медленно

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). naturalWidth (и высота) будут неопределенными, пока изображение не загрузится.

Я могу представить себе состояние гонки, если сначала проверишь, загружен ли он, а затем, если нет, свяжет событие «onload», но между этими двумя действиями изображение завершает загрузку. Я не уверен, возможно ли это, учитывая однопоточный характер JS, но поскольку изображения загружаются асинхронно, возможно, это так.

В проекте, где у меня была похожая проблема, я просто проверял, было ли загружено изображение или нет, и, если нет, устанавливал тайм-аут для повторного вызова функции, поэтому он продолжал бы пытаться, пока не загрузится. Это позволит избежать любого возможного состояния гонки.