Question

我正在开发一个具有一些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返回主页时，任性的功能开启。

我该如何解决这个问题？

Answer 1

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

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

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

如果您的内容消失，您可能需要暂停此操作;您当前解决方案可能无法正常工作的一个原因是您在点击事件上调用该函数，该事件在主页内容加载到页面之前触发。

只为主页调用一个功能，然后将其停在任何其他页面上，然后再次将其调用为主页

1 个答案: