Прерывание загрузки (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"
    );
};

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

Answer 1

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

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

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

Answer 2

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

Вот плагин jQuery, который предоставляет аналогичные функции: Ленивая загрузка

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

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