асинхронная загрузка внешнего изображения с использованием jQuery - PullRequest
Новая
       9

асинхронная загрузка внешнего изображения с использованием jQuery

0 голосов
/ 07 декабря 2010

У меня следующая ситуация :

Мне нужно загрузить несколько внешних изображений, размещенных сторонними разработчиками, с примером URL, как это;

http://externaldomain.com/img/a/b/someimage.jpg

Однако загрузка одного изображения может стоить до 15 секунд! (без ума, я знаю), поэтому я думаю загрузить эти изображения асинхронно, используя jQuery. Вот где я застрял, я попробовал следующие 2 метода: 

var img = new Image();            
$(img).load(function () {                                
    containerForImg.removeClass('loading-image').append(this);
})

.attr('src', imgFullPath)   
.attr('alt', imgAltText);

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

Второй метод - :

Я создал универсальный обработчик (.ASHX) для загрузки изображения с использованием класса WebRequest и WebResponse из .NET и вызова этого обработчика с помощью метода $.ajax() jQuery, но это приводит к тому, что экран перестает отвечать, если их много изображения. Я могу подтвердить, что запрос к обработчику является асинхронным, однако мне любопытно, является ли вызов внутри обработчика асинхронным или нет.

Вывод: оба метода не дают мне лучшего результата. Итак, каков наилучший способ асинхронной загрузки внешнего изображения? Я не ограничен только использованием jQuery, чистое решение ASP.NET отлично.

1 Ответ

0 голосов
/ 07 декабря 2010

Я не уверен, что функция jquery .load () предназначена для использования с объектами Image (). Вы можете сделать это самостоятельно с очень небольшой работой, однако: 

var img = new Image()
img.onError = function(){
    //error handling here
}
img.onLoad = function(){
    //success
    containerForImg.removeClass('loading-image').append($(img));
}
img.onAbort = function(){
    //user clicked stop
}
img.src = "http://example.com"   //loading begins NOW!
...