Блог

При загрузке я предварительно загружаю несколько изображений, используя следующее:

 var temp = '<img src="' image_src '" />',
    target = '#' currentId;     

$(temp).on('load', function() {
    $(target).data('loaded','y');
});
  

Затем, когда мне нужно вызвать изображение, я добавляю его в документ с помощью:

 var $image = '<img src="' image_src '" />';

$('.image-container').html($image);
  

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

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

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

Проблема в том, что вы создаете два отдельных <img /> элемента. Первое, которое вы создаете в памяти и выполняете предварительную загрузку. Второе изображение вы создаете совершенно отдельно и добавляете к .image-container в DOM.

Чтобы устранить проблему, просто добавьте первое изображение, которое было предварительно загружено в .image-container . Также обратите внимание, что было бы разумнее выполнить это append() внутри load() обработчика событий, поскольку таким образом вы можете быть уверены, что изображение было загружено.

 var image_src = 'https://i.imgur.com/RVAJHpS.png';
var $img = $('<img src="'   image_src   '" />');
var $target = $('#target');

$img.on('load', function() {
  $target.data('loaded', 'y');
  $('.image-container').append($img);
});  

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="target"></div>
<div class="image-container"></div>