Отмена (HTML) Загрузка изображений

Question

У меня есть множество наборов изображений, которые я показываю на веб-странице (скажем, 50 изображений в наборе). Пользователь может выбрать набор для отображения из списка, который загружается с помощью jQuery ajax-вызова, чтобы удалить старые теги img и добавить новые.

Что я вижу, так это то, что все запросы на первую партию устаревших изображений по-прежнему вытягиваются с сервера, тем самым задерживая загрузку новых изображений и убивая UX. Поэтому мой вопрос: возможно ли очистить запросы от браузера для первого набора img, который больше не существует в DOM? Это не автоматическое?

Вот пример JQuery фрагмент процесса:

updateImages = function(imageSetId) { 
    // clear existing IMG set 
    $("#imagesDiv").empty(); 

    $.post(
     "/GetImagesInSet", 
     { imageSetId: imageSetId }, 
     function(data) { 
      // add in new IMG set 
      $("#imagesDiv").html(data); 
     }, 
     "html" 
    ); 
}; 

Мое ожидание, что вызов $() пустой() предотвратило бы все отложенные изображения, которые живут в нем должны быть удалены из. очередь запросов. Я возьму альтернативные предложения, если это плохой дизайн!

Answer 1

Я нашел лучшую альтернативу, которая должна использовать ленивую технику загрузки, которая загружает только видимые изображения вместо всех изображений (т. Е. Тех, которые прокручиваются из окна просмотра). Функция поиска изображений Bing.com - действительно хороший пример этого.

Вот плагин JQuery, который обеспечивает подобную функциональность: Lazy Load

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

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

Answer 2

Стоит попробовать:

$("img","#imagesDiv").attr("src",''); 
$("#imagesDiv").empty(); 

Я не уверен, если вы можете удалить ожидающие запросы из очереди, но это, конечно, прекратить любые новые от формирования.