1

我正在开发一个具有一些 AJAX 功能和一些动画效果的网站。

当用户到达网站主页时，会调用一个打开简单图像旋转器的函数。该横幅旋转器仅位于主页上，因此在用户开始从任何其他页面浏览网站时调用该函数是没有意义的：

if (location.pathname.length <= 1) {
animate_hero_images();
}

在第一个页面加载后，用户通过单击链接开始在站点周围导航，AJAX 启动，所有其他页面加载到用户第一个到达的页面。

问题＃1：如果用户第一次到达不是主页的页面，然后才通过AJAX加载主页，animate_hero_images则不会调用函数（横幅旋转器被禁用）。

问题＃2：如果用户首先到达主页，然后导航到其他页面，然后再次返回主页，那么很遗憾我无法控制该特定站点的一些特定问题，animate_hero_images功能加载有明显的延迟，并且无法正常工作。

我试图通过在事件animate_hero_images上再次调用函数来解决这两个问题。click但它只解决了部分问题：如果用户从非主页开始然后加载主页，则调用该函数，并且图像旋转器工作正常。但是，如果用户从主页开始，到其他地方，然后返回主页，则该函数被调用 ok，然后几分钟后，相同的函数从上一次调用中启动，并且图像开始旋转很多速度更快，而且节奏很奇怪。

我的解决方案是为主页调用该函数，然后单击停止该函数，然后一旦加载新页面，如果是主页，再次调用该函数。

我使用这个片段来禁用该功能：

$("body").on('click', '.ajax-link a', function(event) { 
animate_hero_images = function() {};
// do all sorts of other stuff
}

不知何故，这不起作用：当我通过 AJAX 回到主页时，任性功能打开。

我怎么解决这个问题？

4

1 回答 1

1

就个人而言，我会检查英雄图像容器的存在，而不是location.pathname：

function animate_homepage() {
    if($('#hero-container-id-here').length > 0)
    {
        // call animation function here
    }
});

...然后在通过 AJAX success() 方法加载新内容时调用它（如果这是您正在使用的）。只有当您的英雄图像实际存在于页面上时，动画功能才会触发。

如果您的内容淡入，您可能需要设置此超时；您当前的解决方案可能不起作用的一个原因是您在单击事件上调用该函数，该事件在主页内容加载到页面上之前触发。

于 2013-06-14T09:35:20.547 回答