Остановить загрузку изображений с помощью JavaScript (lazyload)?

Question

Я пытаюсь остановить загрузку изображений с помощью javascript на dom ready и затем начать загрузку, когда захочу, так называемая отложенная загрузка изображений. Примерно так:

$(document).ready(function () {
  var images = $('img');
  $.each(images, function() {
    $(this).attr('src', '');
  });
});

Это не работает (протестировано в ff3.5, сафари 3-4). Изображения загружаются так или иначе, я не получаю это.

Например, этот плагин, www.appelsiini.net/projects/lazyload, делает то же самое, удаляя атрибут src при загрузке страницы.

Чего мне не хватает?

РЕДАКТИРОВАТЬ: я добавил тестовую страницу здесь: http://dev.bolmaster2.com/dev/lazyload-test/ Сначала я полностью удаляю атрибут src, затем через 5 секунд добавляю его с исходным изображением. Все еще не работает, по крайней мере, firebug говорит, что изображения загружаются при запуске, доверяет ли firebug?

Answer 1

try removeAttr ("src"); как в http://www.appelsiini.net/projects/lazyload

$(document).ready(function () {
  var images = $('img');
  $.each(images, function() {
    $(this).removeAttr("src");
  });
});

Если он все еще не работает. Проверьте this.loaded - возможно, они загружаются слишком быстро.

Answer 2

Если ваша цель состоит в том, чтобы запретить серверу загружать изображения, то очистка атрибута "src" не будет работать, когда вы запустите документ. в сохраненный HTML - вы увидите, что браузер будет запрашивать изображения с сервера до src очищается).

Вместо этого вы можете попробовать использовать тот же код (или лучше, без jQuery, чтобы убедиться, что он работает максимально быстро), поместив его в раздел "head" внутри цикла setInterval, который очистит атрибут "src" из всех изображений, как только появятся теги (до запуска готового документа jQuery).

Пример:

удалить изображения без jQuery:

function removeImagesBeforeTheyAreRequested(options) {
  var images = document.getElementsByTagName('img');
  for (var i = 0; i < images.length; i++) { 
    var orgSrc = images[i].src;
    images[i].removeAttribute('src'); 
  }
}

запустите этот код в разделе "head", прежде чем тело будет готово (в основном отслеживайте наличие тегов img):

var timer = setInterval(function() {
   removeImagesBeforeTheyAreRequested();
}, 1);

перестать пытаться искать изображения через 3 секунды:

setTimeout(function() { clearInterval(timer); }, 3000);

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

Answer 3

$(document).ready(function () {
    var images = $('img');
    $.each(images, function() {
        $(this).attr('src', '');
    });
});

Это не сработает, потому что jQuery вызывается после загрузки страницы по адресу:

$(document).ready()

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

Answer 4

Мне кажется, проблема в том, что вы очищаете атрибут 'img', а не 'src'.

Если вы тестируете это на локальной странице, ваши локальные изображения могут загружаться слишком быстро. Или, может быть, они взяты прямо из кэша браузера. Попробуйте проверить, загружено ли уже изображение, прежде чем очищать его 'src'.

Answer 5

С помощью JavaScript вы делаете это так.

var imagesArray = document.querySelectorAll('img');

for(var i=0; i<imagesArray.length; i++) {
    imagesArray[i].src = '';
}

Попробуйте сначала использовать Vanilla Javascript.

Answer 6

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

$(document).ready(function() {
  var images = $('img');
  $.each(images, function() {
    $(this).removeAttr("src");
  });
});

Answer 7

Я бы предложил для этого использовать плагин Jquery Lazyload. Это именно то, что вы хотите.

http://www.appelsiini.net/projects/lazyload

Answer 8

Я думаю, что ваша проблема в том, что вы запускаете код в $ (document) .ready, который вызывается, когда документ готов - т.е. когда он полностью загружен, включая изображения. Плагин LazyLoad, на который вы ссылаетесь, не использует $ (document) .ready, и скрипт помещается в заголовок, поэтому он выполняется до / во время загрузки страницы, а не после.

Answer 9

Я не знаю, правильно ли вы написали в вопросе, но атрибут, который вы должны установить для пустой строки, это "src", а не "img". Попробуйте это:

$(document).ready(function () {
  var images = $('img');
  $.each(images, function() {
    $(this).attr('src', '');
  });
});