Попробуйте остановить загрузку изображения с помощью JavaScript

Question

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

window.stop()

Но с помощью этого обходного пути браузер прекращает также загрузку фоновых изображений, определенных в файлах CSS.есть способ достичь этого без применения «обходного пути разметки», такого как «включение URL-адреса изображения в промежуток или что-то в этом роде».

Answer 1

Вы можете полностью удалить атрибут src, используя JavaScript, это эффективно остановит загрузку изображений.

var img = document.getElementById('imageID'),
    src = img.getAttribute('src');

img.removeAttribute('src');

Это гарантирует, что ваши изображения будут по-прежнему загружаться, если у пользователя отключен JS, потому что вы позже удаляете атрибут src с помощью JS.

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

img.setAttribute('src', src);

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

Answer 2

У меня была похожая проблема, и вот как я ее решил:

В скорлупе ореха:

При создании элемента я создал src='Blank.gif' и создал setAttribute("data-src",response[i].photo_url). С учетом того, что Blank.gif не существует, он будет отображаться как неработающая ссылка на изображение, если нижеприведенное не сработает, или он не может загрузить достаточно быстро ...

Затем onscoll я проверил, чтобы увидеть, когда он был в поле зрения, и установил src в data-src. Это работает очень хорошо для меня ...

Подробности!

window.onscroll = function() {

  var top = document.body.scrollTop;
  var bottom = document.documentElement.clientHeight + top;

  var img;

  for (var i=startImage;i<index;i++){
    img = document.getElementById("image" + i);
    var a = img.style.top.substring(0,img.style.top.length-2);
    var b = bottom;//Just for simplicity...
    if (a < b) {
        if (img.src.indexOf('Blank.gif') != -1) {
            img.src = img.getAttribute("data-src");
        }
        startImage++;
    }
  }
}

Надеюсь, что это может спасти кого-то еще 2 1/2 часа поиска / работы!

Не стесняйтесь, дайте мне знать, если вы думаете, что есть способ сделать вышеупомянутое более эффективным!