Не загружайте скрытые изображения

Question

У меня есть куча скрытых изображений на моем сайте. Их DIV-контейнеры имеют style = "display: none". В зависимости от действий пользователя, некоторые изображения могут быть раскрыты с помощью JavaScript. Проблема в том, что все мои изображения загружаются при открытии страницы. Я хотел бы уменьшить нагрузку на сервер, загружая только те изображения, которые в итоге становятся видимыми Мне было интересно, если бы был чистый способ CSS сделать это. Вот два хакерских / сложных способа, которыми я сейчас занимаюсь. Как видите, это не чистый код.

<div id="hiddenDiv">
   <img src="spacer.gif" />
</div>

.reveal .img {
 background-image: url(flower.png);
}

$('hiddenDiv').addClassName('reveal');

Вот метод 2:

<img id="flower" fakeSrc="flower.png" />

function revealImage(id) {
 $('id').writeAttribute(
  'src',
  $('id').readAttribute('fakeSrc')
 );
}

revealImage('flower');

Answer 1

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

<img class="hidden" data-src="url/to/image.jpg" />

Я создал этот крошечный плагин, который позаботится о проблеме:

(function($){
    // Bind the function to global jQuery object.
    $.fn.reveal = function(){
        // Arguments is a variable which is available within all functions
        // and returns an object which holds the arguments passed.
        // It is not really an array, so by calling Array.prototype
        // he is actually casting it into an array.
        var args = Array.prototype.slice.call(arguments);

        // For each elements that matches the selector:
        return this.each(function(){
            // this is the dom element, so encapsulate the element with jQuery.
            var img = $(this),
                src = img.data("src");

            // If there is a data-src attribute, set the attribute
            // src to make load the image and bind an onload event.
            src && img.attr("src", src).load(function(){
                // Call the first argument passed (like fadeIn, slideIn, default is 'show').
                // This piece is like doing img.fadeIn(1000) but in a more dynamic way.
                img[args[0]||"show"].apply(img, args.splice(1));
            });
        });
    }
}(jQuery));

Выполните .reveal на изображениях, которые вы хотите загрузить / показать:

$("img.hidden").reveal("fadeIn", 1000);

См. контрольный пример на jsFiddle .

Answer 2

Вот решение jQuery:

$(function () {
   $("img").not(":visible").each(function () {
       $(this).data("src", this.src);
       this.src = "";
   });

   var reveal = function (selector) {
       var img = $(selector);
       img[0].src = img.data("src");
   }
});

Это похоже на ваше решение, за исключением того, что в разметке не используется атрибут fakeSrc. Он очищает атрибут src, чтобы остановить его загрузку, и сохраняет его в другом месте. Когда вы будете готовы показать изображение, вы используете функцию reveal так же, как в своем решении. Я прошу прощения, если вы не используете jQuery, но этот процесс должен быть перенесен в любую среду (если есть), которую вы используете.

Примечание. Этот код необходимо запускать прежде, чем окно запустит событие load, но после загрузки DOM.

Answer 3

Это частично зависит от того, как ваши изображения должны быть размещены в вашем коде. Можете ли вы отображать изображения в качестве фона

, или вам необходимо использовать тег ? Если вам нужен тег , вы можете быть ввернуты в зависимости от используемого браузера. Некоторые браузеры достаточно умны, чтобы распознавать, когда изображение находится внутри скрытого объекта или объекта 0 по ширине / высоте, и не загружать его, так как оно, по сути, невидимо. По этой причине многие люди предложат поместить изображение размером 1x1 , если вы хотите, чтобы изображение было предварительно загружено, но не видно. Если вам не требуется тег , большинство браузеров не будут загружать изображения, на которые ссылается CSS, до тех пор, пока рассматриваемый элемент не станет видимым. Имейте в виду, что если не использовать AJAX для загрузки изображения, невозможно быть на 100% уверенным, что браузер все равно не будет предварительно загружать изображение. Не исключено, что браузер захочет предварительно загрузить все, что, по его мнению, может быть использовано позже, чтобы «ускорить» среднее время загрузки.

Answer 4

Если вы сделаете изображение фоновым изображением div в CSS, когда для этого div установлено значение 'display: none', изображение не будет загружаться.

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

<img style="display: none; height: auto; width:100%; background-image: 
url('img/1078x501_1.jpg'); background-size: cover;" class="center-block 
visible-lg-block" src="img/400x186_trans.png" alt="pic 1">

Изображение будет загружено только тогда, когда медиазапрос, связанный с visible-lg-block, запущен и отображается: ни один не изменяется на display: block. Прозрачный png используется для того, чтобы браузер мог установить соответствующие соотношения высоты: ширины для вашего блока (и, следовательно, фонового изображения) в плавном дизайне (высота: авто; ширина: 100%).

1078/501 = ~2.15  (large screen)
400/186  = ~2.15  (small screen)

Таким образом, вы получите что-то вроде следующего для 3 разных видов:

<img style="display: none; height: auto; width:100%; background-image: url('img/1078x501_1.jpg'); background-size: cover;" class="center-block visible-lg-block" src="img/400x186_trans.png" alt="pic 1">
<img style="display: none; height: auto; width:100%; background-image: url('img/517x240_1.jpg'); background-size: cover;" class="center-block visible-md-block" src="img/400x186_trans.png" alt="pic 1">
<img style="display: none; height: auto; width:100%; background-image: url('img/400x186_1.jpg'); background-size: cover;" class="center-block visible-sm-block" src="img/400x186_trans.png" alt="pic 1">

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

И без JavaScript!

Answer 5

Если вы хорошо полагаетесь на сценарии, есть метод фонового изображения и метод image src. Проще говоря, установите все ваши скрытые изображения на какое-то очень маленькое изображение (уменьшите нагрузку на сервер) или на то, которое вообще не существует (кого это волнует? Посетитель не может увидеть отсутствующее изображение [X] в любом случае, div скрыто), затем изменить его с помощью скрипта ...

<img src="I_do_not_exist.jpg" id="my_image" />
<input type="button" onclick="document.getElementById('my_image').src='I_exist.jpg';" Value="change image" />

<br /><br /><br />

<div id="mydiv" style="width:40px; height:40px; border:2px solid blue"></div>

<input type="button" onclick="document.getElementById('my_div').style.width='455px';document.getElementById('my_div').style.height='75px';document.getElementById('my_div').style.backgroundImage='url(I_exist.jpg)';" Value="change background image" />

Я оставил ширину в приведенном выше примере, чтобы показать, что в изображении div ничего нет, пока вы не попросите его загрузить.

Answer 6

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

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