jquery - 使用 img 标签将预加载的图像添加到 HTML 中会导致图像重新下载

Question

加载时，我使用以下内容预加载多个图像:

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 中时，它会从浏览器缓存中添加它。

这是正确的吗？或者如果以上述方式添加图像，是否会再次下载图像？

Answer 1

问题是因为您正在创建两个单独的 <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>