Как загрузить изображение асинхронно?

Question

Я загружаю изображение на карту текстуры с помощью GLGE (вроде webGl).Однако ради скорости загрузки я сначала загружаю изображение с низким разрешением (что было бы быстрее), а затем хочу изменить src на изображение с высоким разрешением после загрузки большого изображения.Это то, что я делаю сейчас

var texture =  new GLGE.texture();
function updateTexture(){
    var image=new Image();
    image.src = "models/testLargeMap_map0.jpg"; // load image

    image.onload = function(){
        texture.image("models/testLargeMap_map0.jpg"); // supposedly swap image on load (not working as I thought)
    }   
}

Однако, когда в течение этого периода смены SRC, модель и все ее функции зависают.Как сделать так, чтобы оно загружало изображение асинхронно и при загрузке меняло его на более высокую текстуру для плавного мгновенного изменения текстуры?

Answer 1

Вы можете установить обработчик событий image.onload следующим образом:

var big_image = new Image();
big_image.onload = function () {
    texture.image("models/testLargeMap_map0.jpg");
}
big_image.src = "models/testLargeMap_map0.jpg";

(Обратите внимание, что сначала я устанавливаю обработчик загрузки, затем устанавливаю атрибут src. Если я делаю это наоборот, онне удается в IE).

Это предварительно загрузит изображение перед вызовом texture.image.Я ничего не знаю об этой библиотеке, поэтому не уверен, что она будет использовать предварительно загруженное изображение.

Answer 2

Я не знаком с "GLGE", но похоже, что проблема в том, что метод .image() загружает изображение снова (любезно, независимо от того, происходит ли это в обработчике события загрузки для того же изображения).

Так что, если вы не можете установить image reference напрямую, как

texture = this; // within the load handler

нет способа сделать это с этой библиотекой.

Answer 3

image.src будет запрашивать изображение с сервера, и оно будет инициировать событие загрузки, и снова вы запрашиваете обмен изображения, чтобы оно зависло.Зачем вам такой подход.Вы можете иметь лучший способ сделать это, например, сначала разрешить загрузку изображения с низким разрешением, а затем назначить событие onmouseover или onclick для изображения в это время, вы можете показать всплывающее окно, как показано на изображениях Google, а затем в нем просто отобразить высокоеразрешение изображения.В это время вы будете запрашивать одно изображение, процесс будет быстрее.Надеюсь, это поможет вам