Javascript 链接到带有散列片段的页面（这样用户就可以在页面上的特定内容上着陆）问题

我想要的功能：

我想给一个用户一个像mysite.com/foobar这样的链接，这样当他们点击这个链接时，他们会在页面foo上着陆，并在页面上向下滚动到带有id栏的内容的一半。应该注意的是，此链接将始终从非现场单击或手动键入地址栏，用户将不会在页面上加载所有资产

另外，仅供参考，我正在使用angular和有问题的页面，每个内容位都在一个元素指令中，每个指令模板中都有图像

问题是：

很简单，对吧？嗯，我遇到了一些问题，大多数情况下它都能正常工作，但可能有40%的情况下它不能正常工作，用户会在内容上方着陆，我相信这是因为浏览器会滚动到页面上的正确点，但随后图像会加载到页面上方，将页面的其余部分向下推，让用户处于随机的非直观位置。由于某种原因，iPhone的故障率似乎更高

到目前为止，我所尝试的：

在run函数中，我在任何路由上查找哈希片段，如果它存在，则滚动到它

    if($location.hash()) {
        $anchorScroll();
    }

我试过：

在超时情况下包装它 这有时可以工作，但显然不一致，我可以将其设置为500毫秒，在良好的wifi连接上也可以，但在信号较差的手机上则不行

正在侦听$viewContentLoaded 速度太快，ui路由器似乎在呈现页面之前触发此事件

在页面上所有指令的每个post链接函数中发出事件

link: function ($scope) {
    $scope.$emit('loadingFinished');

然后在run函数中再次拾取该值

$scope.$on('loadingFinished', function () {
    $timeout(doAnchorScroll, 500);
}

这提高了成功率，但仍然不是万无一失的。我亲眼目睹了它让用户被困在主要是iPhone上的奇怪地点

---

有谁能建议一种方法来检测滚动的安全时刻，或者其他方法来确保在正确的位置着陆吗？

有两件事-首先是用户滚动应该阻止它-如果他们已经滚动，你不想滚动视图。第二个是监听图像以完成加载

收听图像非常容易：

$("img").one("load", $anchorScroll);

然后在$anchorScroll中，我建议检查是否所有图像都已加载，如果您只检查锚上方的图像，但只做一个快速回复，如果没有加分，则立即返回：

var scrolled = false;

function $anchorScroll() {
    var allLoaded = true;

    $("img").each(function() {
        if (!this.loaded) {
            return allLoaded = false;
        }
    });
    if (scrolled || !allLoaded) {
        return;
    }
    ...

滚动可能会稍微困难一些-您可以检查滚动事件，但不同平台之间的滚动事件略有不同-甚至可能会因手动滚动而被解雇-如果您发现发生这种情况，则只需使用一个全局设置，显示我正在此处滚动并忽略它，否则：

$(document).one("scroll", function() { // Use ".on" if this gets fired for code...
    scrolled = true;
});

请注意，您可能不需要关心失败的图像加载或已经加载的图像加载，因为您对$anchorScroll的初始调用将捕获它们