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 />元素。第一个在内存中创建并执行预加载。您完全独立创建的第二个对象，并附加到DOM中的.image-container。

要解决此问题，只需将预先加载的第一个附加到.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>

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

1 个答案: