Question

我有一个页面，其中左侧有6个菜单项，必须在左侧显示各自的内容（基于click()事件的选择和。）

方法1：

我可以switch() id个菜单项，并动态append()他们各自的内容在右边。

（动态编写代码，请原谅任何错误）

喜欢这样，

switch(id)
{
    case 1: $(".ContentRight").children().remove();
            $(".ContentRight").append('<img src="someImage1" .../>');
            break;

    case 2: $(".ContentRight").children().remove();
            $(".ContentRight").append('<img src="someImage2" .../>');
            break;
    .
    .
    .
    .
}

虽然与

相比，这似乎是一个更昂贵的选择

方法2：首先加载所有内容（使用display:none或其他内容），然后根据选择显示内容。

然而，对于第二种方法，加载用户甚至看不到的内容是否“很好”？

Answer 1

就个人而言，我会选择选项2.这是最干净的，如果你计划这是一个公共网页，它可以被搜索引擎索引。麦克

Answer 2

第二种选择更合适。

选项1的问题是经常处理DOM。页面的常量reflow and repaint（移动和重新打印布局）在浏览器中是一个昂贵的过程。想象一下，在选择之后你采取了以下步骤：

从DOM中删除元素
重新计算布局（影响其他元素布局）
在DOM中添加了元素
重新计算布局

第二个只是显示和隐藏。你没有删除元素。这就像只做第2步和第4步一样！

Answer 3

这取决于几个因素：

这些图像中有多少，它们有多大。如果有一个吨并且它们相当大而且给定的用户只会看到其中的几个，那么每个人只需加载需要它们时实际需要的那些（选项1）可能会更有效率。
如果您需要在代码想要显示图像时立即显示图像，则必须预先加载该图像，否则在图像可见时会加载图像延迟。因此，这种即时性能要求在需要之前加载图像（选项2）。
提前加载它们只是隐藏/显示所需的图像通常是很简单的代码。如果没有其他因素推动决策，那么每次都要简单（选项2）。
如果用户可能最终看到所有图像，那么您也可以预先加载它们（选项2）。
如果您正在尝试优化小型内存设备或昂贵的带宽（例如手机），那么您只需要加载实际需要的图像（选项1）。
如果以预定义的顺序需要图像，则有混合方法。您加载当前图像并预加载下一个图像，以便立即准备好。当您显示下一个图像时，然后在此之后预加载下一个图像。通过这种方式，您可以随时准备好下一个映像，但是您不会预先加载多个映像，因此可以最大限度地减少带宽和内存使用量。我编写了一个HTML5幻灯片，以这种方式工作。

Answer 4

第一种方法仅下载所需内容，但第二种方法一次下载所有项目，并在需要时使用它们。

如果您根据悬停事件显示项目，最好使用第二种方法，因为人们不会在悬停时等待。

如果您根据点击事件显示项目，很可能点击的人会等待某些事情发生，因此您有时间加载（可以使用预加载器进一步增强）。在这种情况下，第一种方法似乎更好，因为它可以节省带宽，前提是您在第一次加载时在DOM中创建一个元素，并在不需要时隐藏它。

此外，正如@Michael Rice所说，如果搜索机器人可以阅读Javascript（如GOOGLE-BOT），第二种方法将有助于更好的搜索引擎索引您的项目

现在取决于你。您的实施应该反映您的需求。

Answer 5

同时做到：

function LoadContent(id) {
    var active = $('#'+id);
    $('.added').hide(); // hide all
    if (active.length) {
        active.show();  // if it's already been loaded, just show
    } else {
        active = $('<div></div>').attr('id', id).addClass('added');
        active.load('url to get new content');   // load it dynamically
        $('.contentRight').append(active);
    }
}

哪种方法使用jQuery更好？

5 个答案: