解决ajax+lazyload+animate的小问题

代码片段, 折腾 2019/06/06

小博客几乎整站都使用了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);
	}
});

成功解决~

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



评论(*号为必填项)