我有一个用jQuery制作的幻灯片。它长936px。所有单独的幻灯片都具有.slide和唯一ID类，并由#slideinner div包装。
我的意图是每当有一个带有.slide类的div进入视图时，它会从外部html页面加载内容;每当幻灯片改变并且div不在视图中（即它是向左或向右），那么它将摆脱加载的内容并且只是一个空div，无论何时它在视图中或者是出来的。
为了检测天气，我在使用viewport jQuery插件时看到.slide div。
然而，我对事物进行编码的方式似乎并没有使我们按照我的意图使用它们。
我会告诉你我做了什么，希望你能告诉我我做错了什么。
我在页面的head部分加载了slide.js（动画我的幻灯片的脚本）脚本以及viewport.js和jQuery，然后将以下代码添加到每个具有.slide类的div中。
这是我用于幻灯片一和三的。
幻灯片1
<div id="homes" class="slide">
<script type="text/javascript">
$('#homes').load('pageone.html #homepage');
</script>
</div>
幻灯片2
<div id="blogs" class="slide">
<script type="text/javascript">
$('#blogs').ready(function ()
{
$('.control').bind('click', function()
{
if ($('#blogs').is(":in-viewport"))
{
$('#blogs').load('pagetwo.html #blog');
}
else
{
$('#blogs').empty();
}
});
});
幻灯片3
<div id="portfolio" class="slide">
<script type="text/javascript">
$('#portfolio').ready(function ()
{
$('.control').bind('click', function()
{
if ($('#portfolio').is(":in-viewport"))
{
$('#portfolio').load('pagethree.html #homepage');
}
else
{
$('#portfolio').empty();
}
});
});
</script>
</div>
我总共使用了四张幻灯片。
最后一张幻灯片采用与幻灯片2和3相同的模式（相同的代码，选择了不同的ID并加载了页面。）
.control是移动幻灯片的左右箭头的类名。
我的第一张幻灯片与幻灯片2和其他幻灯片的代码不同的原因是因为在加载页面时未加载其内容;因为它依赖于click事件来检查它是否在视口中。
这是我可以接受的妥协，但以下是我需要解决的大问题。
我遇到的问题如下：
首先，当页面加载并点击右箭头，然后出现一张新幻灯片时，firebug显示所有幻灯片都已加载了html页面中的内容，即使它们不在视图中。
因为只应加载幻灯片2的内容（并且因为它没有.empty方法而滑动1'）
起初我认为这是视口插件的问题或如何使用它然后我注意到第二个问题。
其次，当我到达最后一张幻灯片时（在这种情况下为幻灯片4），所有幻灯片仍然加载了内容;但是，当我单击左箭头返回第三张幻灯片时，所有幻灯片（除了幻灯片1偏离课程）执行.empty命令并且是空白的。
如果我再次单击左箭头，转到幻灯片2，幻灯片将再次加载所有内容，我会看到幻灯片2的内容。
这让我感到困惑的是它是视口插件问题，还是我如何使用它，或者我编写的代码，或者是疏忽。
我想要的，实质上是让每个.slide div加载来自外部页面的内容（如果它们是用户正在查看的幻灯片），并删除加载的内容，或者如果它们不是，则保持为空用户查看。
我希望有一种方法可以改进这个代码，或者采用不同的方式来实现它。我希望有一个人可以帮助我。