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

Ответ 1

Здесь решение 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.

Ответ 2

В браузере будут загружены все изображения с установленным атрибутом 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.

Ответ 3

Частично это зависит от того, как ваши изображения должны быть помещены в ваш код. Вы можете отображать изображения в качестве фона <div> , или вам необходимо использовать <img> тег? Если вам нужно <img> тега, вы можете быть ввернуты в зависимости от используемого браузера. Некоторые браузеры достаточно умны, чтобы распознавать, когда изображение находится внутри скрытого объекта или в объекте с шириной и высотой 0, и не загружать его, поскольку он по сути невидим. По этой причине многие люди предпочтут поместить изображение в 1x1 пиксель <span> если вы хотите, чтобы изображение было предварительно загружено, но не было видно.

Если вы не требуете <img> тега, большинство браузеров не будут загружать изображения, на которые ссылается CSS, пока этот элемент не станет видимым.

Помните, что, не используя AJAX для загрузки изображения, нет способа быть на 100% уверенным, что браузер не будет предварительно загружать изображение в любом случае. Невероятно, что браузер захочет предварительно загрузить все, что он предполагает, может быть использован позже, чтобы "ускорить" среднее время загрузки.

Ответ 4

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

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

Ответ 5

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

<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 файле нет ничего мудрых, пока вы не попросите его загрузить.

Ответ 6

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

Вы можете сделать следующее для чистого решения CSS, оно также делает поле img действительно таким же, как img-box в настраиваемом дизайне (для чего предназначен прозрачный 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">

Изображение загружается только тогда, когда медиа-запрос, связанный с видимым-lg-блоком, запускается и отображается: ни один не изменяется для отображения: блок. Прозрачный png используется, чтобы позволить браузеру устанавливать соответствующие соотношения высоты и ширины для вашего <img> блок (и, следовательно, фоновое изображение) в дизайне жидкости (высота: авто, ширина: 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!