CSS & ldquo; display: none & rdquo; не предотвращает загрузку изображений? [Дубликат]

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

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

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

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>");
    });
});

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

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

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

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

Ну с 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());

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

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

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

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

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

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

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

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

Ответ на эту проблему очень легко с помощью 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>

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

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