Предотвращение загрузки изображений

Ответ 1

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

Редактировать 1: Сценарий, на который вы ссылались, просто проверяет, насколько далеко вы прокрутили страницу вниз, а затем определяет, какие изображения видимы (или почти видимы), проверяя их верх - см. Расширения $.belowthefold и $.rightoffold.

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

Изменить 2:

<script type="text/javascript" charset="utf-8">
    $(document).ready( function() { $("img").removeAttr("src"); } );
</script>

<img src="Chrysanthemum.jpg" />
<img src="Desert.jpg" />
<img src="Hydrangeas.jpg" />
<img src="Jellyfish.jpg" />
<img src="Koala.jpg" />
<img src="Lighthouse.jpg" />
<img src="Penguins.jpg" />
<img src="Tulips.jpg" />

Ответ 2

Вы можете обернуть изображение в тег noscript:

<noscript>
<img src="foo.jpg"/>
</noscript>

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

Ответ 3

Храните URL-адреса в другом месте, затем установите для всех URL-адресов изображений какое-нибудь фиктивное изображение (пустое, прозрачное, "загрузка данных...", что угодно). Когда изображение должно отображаться, используйте JS для установки атрибута src, и браузер его выберет.

Ответ 4

Хорошо с Prototype вы можете сделать что-то вроде этого, я думаю:

var unloaded = [];
$$('img.noload').each(function (image) {
    unloaded.push(image);
    image._src = image.src;
    image.src = '';
});

Чтобы загрузить все из них:

unloaded.each(function (image) {
    image.src = image._src;
});

Для загрузки первого:

function loadImage (image) {
    image.src = image._src;
}

loadImage(unloaded.shift());

Ну, надеюсь, у вас есть идея.

Ответ 5

Просто не включайте тег img в свой исходный HTML, создавайте его на лету, используя DHTML по мере необходимости. Вы также можете помещать фальшивый URL-адрес в img-тег и динамически заменять его реальным.

С другой стороны - какая точка. Все, что вы пытаетесь сделать здесь, - это создать еще один механизм кеширования над существующим. Оставьте кэширование в браузерах, они довольно хороши в этом

Ответ 6

Вы можете использовать приведенную ниже часть, чтобы заменить все теги изображений фиктивным файлом (например, прозрачным gif 1x1). URL-адрес хранится в массиве для последующей ссылки.

$(document).ready(function(){
    var images = new Array();
    $("img").each(function(i){
      images[i] =  this.src;
       this.src='blank.gif';
    });
});

Ответ 7

В этой статье показаны некоторые тесты с использованием как css background, так и img-тегов в наборе стандартных браузеров.

В моем личном опыте PictureFill Scott Jehl - лучшее решение, которое я когда-либо использовал для разрешения и размеров изображений для мобильных устройств.

Ответ 8

Я не рекомендую это решение по многим причинам (например, он разрушает вашу страницу, если у вас нет Javascript, экраны и т.д.), но это возможность...

Вы можете изменить тег IMG, чтобы он захватывал другой атрибут, например ALT (LONGDESC или TITLE):

Затем используйте Javascript для обновления атрибута SRC с использованием значения ALT, как вам нужно.

Итак, это один из способов, а не хороший. Я считаю, что единственный реальный подход - динамически генерировать правильный тег IMG по мере необходимости через Javascript, а не публиковать его с помощью HTML (это также имеет последствия для браузеров, не поддерживающих JS и т.д.).

Ответ 9

Я знаю, что это старый вопрос, но мне потребовалось некоторое время, чтобы выяснить, как выполнить то, что я хотел. Это лучший результат для DuckDuckGo, поэтому я считаю, что стоит разместить здесь.

Этот небольшой фрагмент предотвратит загрузку imgs, вложений и iframe и будет вручную загружать их позже, когда это необходимо. Одно предостережение: объекты, которые загружаются слишком быстро для JQuery/JavaScript, чтобы их поймать, по-прежнему загружаются, а script все еще удаляет их. Поскольку это предназначено для уменьшения времени загрузки, это не должно быть проблемой.

Fiddle

loadObjects = function() {
  /* LOAD OBJECTS */
  $("img, embed, iframe").each(function() {
    var obj = $(this);

    obj.attr("src", obj.data("objsrc")).ready(function() {
      obj.fadeIn(1000, "linear").prev(".loading").fadeOut(750, "linear", function() {
        $(this).remove();
      });
    });
  });
}

$(document).ready(function() {
    /* *** PREVENT OBJECTS FROM LOADING *** */
    $("img, embed, iframe").each(function() {
        var obj = $(this);
        obj.data("objsrc", obj.attr("src"));
        obj.hide().attr("src", "").before("<span class=\"loading\"></span>");
    });
});

Ответ 10

Ответ на эту проблему очень прост с помощью insertAdjacentHTML(), который позволяет добавлять HTML, когда вам нравится, в данном случае при нажатии кнопки:

function LoadImages(){

 document.body.insertAdjacentHTML('afterEnd','<img src="one.jpg" alt="" height="100" width="100"> <img src="two.jpg" alt="" height="100" width="100">');

}

HTML...

<button onclick="LoadImages();">Click to load images</button>