ajax animate,解决ajax+lazyload+animate的小问题

小博客几乎整站都使用了ajax的方式进行页面加载，最近突然想起来当时做现在这个主题的时候，留下的一些bug还没处理。

比如：侧边栏的评论链接点击后的跳转

问题：评论链接本应是点击后，页面直接拉到对应的评论锚点位置，但是因为使用了ajax，所以并不生效。

思路：点击后，通过前端来判断该评论div所在的页面位置，然后jquery的animate scrollTop到该位置

—————– 一通折腾后 —————–

问题来了。

因为同时文章内页的图片也使用了lazyload来加载，当ajax完成加载后，页面同时响应lazyload事件

也就是说，ajax的success或complate事件完成后，前端会立即获取评论div的相对位置，而此刻页面的图片并未加载，还是占位符的状态。

所以当scrollTop的过程中，lazyload也被触发，同时也将图片加载了。之前获取到相对位置就不再是该评论div的位置，自然scrollTop的位置就会发生偏离。

—————– 继续一通折腾后 —————–

我能想到的方法是，延迟lazyload

当ajax完成后，开始获取评论位置，并animate到该位置，然后才开始执行lazyload

利用setTimeout，实现上述的思路

$.ajax({

/****/

complete: function() {

//先animate到指定位置

$('html,body').animate({scrollTop:$('#commentID').offset().top}, 300);

//延迟500ms后执行lazyload

setTimeout(function(){

init();

}, 500);

}

});

成功解决~

效果就是目前本站侧边栏点击评论链接后样子