隐藏/显示元素或附加元素是否更好？

Question

哪一个是首选方法？为什么？

方法1：

<p>When I'm clicked, add an image under me.</p>
<img src="/path/to/image.gif" />

$('p').hide(); // OR css display:none
$('p').click(function() {
    $('img').show();
});

方法2：

<p>When I'm clicked, add an image under me.</p>

$('p').click(function() {
    $('<img src="/path/to/image.gif" />').appendTo('p');
});

Answer 1

在这个精确的案例中，第一个解决方案似乎更好，因为它使浏览器能够在用户点击之前很久就开始加载图像。

当您没有如此出色的行为差异时，我建议保留解决方案，使您拥有最干净，最简单的代码。这将取决于您可以向我们展示的更多代码。

即使在那里，如果第二个解决方案与框架更加一致，或者由于其他原因几乎可以确保您的图像处于缓存中，则第二个解决方案可能会更好。