Question

我目前正在处理一页大小。一切进展顺利，负载速度仍然足够快。我仍然希望阻止我的网站加载缓慢。所以我在考虑以下

我有一个包含瓷砖的投资组合页面。单击图块时，会出现黑色不透明度叠加层，并会弹出一个滑块。

目前我正在使用这种方法：

<div class="item" id="2"><img src="picture of project"/>
  <div class="hoverOverlay" onclick="$('#port2').show(); $('#portfolioOverlaybg').fadeIn();">
  </div>
</div>

这意味着我将在页面打开时加载所有投资组合滑块div。当人们点击投资组合项目时（在这个示例项目2中，它只会显示这个。并隐藏它没有关闭。

现在我发现了这种方法我想知道这是否是一种更有效的方法：

$(function() {
  $('#hoverOverlay2').click(function() { 
        $('#port2').load($(this).attr('href'));
        return false; // And prevent it following the link
  });
});

所以在这种情况下，我将链接到我的服务器上的一个文件来加载。

如果有人认为这两种方法都不是很好。你有什么建议？

Answer 1

现实 - 这是一种偏好。在页面上加载额外的HTML会不会减慢速度，或者没有？你喜欢一次装载所有东西吗？然后走第一条路线。

如果您想要一个更干净的文件，并且不介意在点击时加载额外的时间，请转到第二条路线。

如果你有数百个项目，那么第一条路线就是个坏主意。如果你有6，也许不是。这取决于你想去哪条路线，要么适合，但如果你的规模开始倾向于大的东西，第二条路线将更加可维护。

加载外部内容的最佳方式

1 个答案: