Как отключить загрузку изображений <img> без использования window.stop()

У меня очень длинная страница, которая динамически загружает изображения по мере прокрутки пользователями.

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

Слишком много других запросов, которые происходят на странице одновременно, помимо загрузки изображений, поэтому тупое включение window.stop() в событии прокрутки неприемлемо.

Я попытался удалить и очистить атрибуты img src для изображений, которые больше не отображаются, однако, поскольку запрос уже запущен, изображение продолжает загружаться.

Помните, что изображение src было заполнено, когда пользователь ненадолго прокручивался мимо этой части страницы. Как-то прошлым, я не мог получить это изображение от остановки загрузки без использования window.stop(). Очистка src не работает. (Chrome и FF)

Похожие сообщения, которые я нашел, подходят, но, похоже, не решают эту проблему:

Ответ 1

То, что вы пытаетесь сделать, это неправильный подход, упомянутый nrabinowitz. Вы не можете просто "отменить" процесс загрузки изображения (установка атрибута src в пустую строку не является хорошей идеей). Фактически, даже если бы вы могли, это сделало бы только худшие вещи, так как ваш сервер будет постоянно отправлять данные, которые будут отменены, увеличивая коэффициент загрузки и замедляя его. Также рассмотрим следующее:

Если ваш пользователь прокручивает бегство вверх и вниз по странице, он/она будет ожидать некоторые задержки при загрузке.
с задержкой ожидания (например: 200 мс), прежде чем начать загрузку части страницы, является довольно приемлемой, и сколько раз будет останавливаться и прыгать через интервал 200 мс на вашей странице? Даже это происходит, оно возвращается к пункту 1
насколько велики ваши изображения? Даже медленный сервер может обслуживать несколько десятков 3-килобайтовых thunbnails в секунду. Если ваш сайт имеет большие изображения, подумайте об использовании изображений с низким и высоким разрешением с некоторыми компонентами, такими как lightBox

Часто проблемы с компьютером - это просто проблемы с дизайном.

** EDIT **

Вот идея:

ваша страница должна отображать контейнеры DIV с шириной и высотой ожидаемого размера изображения (используйте стиль CSS). Внутри каждого DIV добавьте ссылку. Например:
```
<div class="img-wrapper thumbnail">
   <a href="http://www.domain.com/path/to/image">Loading...</a>
</div>
```

Добавьте этот Javascript (непроверенный, идея самоописана)

$(function() {

var imgStack;
var loadTimeout;

$(window).scroll(function() {
   imgStack = null;
   if (loadTimeout) clearTimeout(loadTimeout);

   loadTimeout = setTimeout(function() {

      // get all links visible in the view port
      // should be an array or jQuery object
      imgStack = ...

      loadNextImage();
   }, 200);                // 200 ms delay
});

function loadNextImage() {
   if (imgStack && imgStack.length) {
      var nextLink = $(imgStack.pop());   // get next image element

      $('<img />').attr('src', nextLink.attr('href'))
        .appendTo(nextLink.parent())
        .load(function() {
           loadNextImage();
        });

      // remove link from container (so we don't precess it twice)
      nextLink.remove();
   }
};

});

Ответ 2

Ну, моя идея:

1) инициировать запрос AJAX для изображения, если он преуспеет, изображение переходит в кеш браузера, и после установки атрибута 'src' изображение отображается из кеша

2) вы можете прервать XHR

Я написал крошечный сервер с экспресс-эмуляцией огромной загрузки изображения (он на самом деле просто ждет 20 секунд, а затем возвращает изображение). Тогда у меня это в моем HTML:

<!DOCTYPE html>
<html>
    <head>
        <style>
            img {
                width: 469px;
                height: 428px;
                background-color: #CCC;
                border: 1px solid #999;
            }
        </style>
    </head>

    <body>
        <img data-src="./img" src="" />
        <br />
        <a id="cancel" href="javascript:void(0)">CANCEL</a>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
        <script>
            $(function () {
                var xhr, img = $('img'), src = img.data('src');

                xhr = $.ajax(src, {
                    success: function (data) { img.attr('src', src) }
                });

                $('#cancel').click(function (){
                    xhr.abort();
                })
            });
        </script>
    </body>
</html>

Ответ 3

Вы можете загружать изображения с помощью ajax-вызовов, а в случае использования прокрутки вы можете прервать вызовы.
В псевдокоде jQuery это было бы что-то вроде этого (простить мне ошибки в синтаксисе, это просто пример):

1) теги, которые вы хотите загрузить

$(".image").each( function(){
    if ( is_in_visible_area(this) ) { // check [1] for example
        $(this).addClass("load_me");
    } else {
        $(this).addClass("dont_load");
    }
});

2) Загрузка изображений

ajax_requests = {};

$(".image.load_me").each( function(){
    // load image
    var a = $.ajax({
        url: 'give_me_photos.php',
        data: {img: photo_id},
        success: function(html){
            photo_by_id(photo_id), img.append(html);
        }
    });
    ajax_requests[photo_id] = a;

});

3) отмените загрузку с экрана

for( id in ajax_requests ) {
    if ( ! is_in_visible_area(id) ) {
        ajax_requests[id].abort();
    }
}

Конечно, добавьте также некоторую проверку, если изображение уже загружено (например, класс "загружен" )

[1]. Проверьте, видим ли элемент после прокрутки

[2]. Отменить запросы Ajax с использованием jQuery

Ответ 4

Используйте стек для управления запросами ajax (значит, вы будете иметь последовательную загрузку вместо параллельной, но это того стоит)
На остановке прокрутки подождите 300 мс, а затем нажмите все изображения внутри области просмотра в стек
Каждый раз, когда пользователь прокручивает, проверяет, работает ли стек. (fyi - вы можете остановить все запросы к определенному URL-адресу вместо того, чтобы убивать все вызовы ajax, а также вы можете использовать регулярное выражение, чтобы оно не останавливало других запросов на странице)
Если существующий стек запущен - поместите все изображения, которые в нем, кроме самой верхней части.
Во всех вызовах ajax - привязать событие beforeSend(), чтобы удалить это конкретное изображение из стека

Сейчас уже поздно, но мы сделали что-то очень похожее на работе - если вам нужен подробный код, дайте мне знать.

Ура!

Ответ 5

Возможно, вы могли бы обслуживать изображение через php script, который проверял бы поле в db (или еще лучше memcached), которое указывало бы на остановку загрузки. script будет разделять изображение на куски и останавливаться между каждым фрагментом и проверять, является ли флаг остановки для конкретного запроса. Если он установлен, вы отправляете заголовок с A 204 без содержимого, которое, как только браузер получит его, перестанет получать.

Это может быть немного убито, хотя.

Ответ 6

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

Сейчас я работаю над решением с serviceWorkers - у них нет ограничения на соединение (надеюсь)

Ответ 7

BTW, другая идея, которая может работать:

1) создать новый iframe

2) внутри iframe есть script, который начинает загрузку изображения, и после его загрузки вызовите метод .parent

3) при необходимости остановите загрузку содержимого iframe с помощью .stop объекта iframe