JavaScript无限滚动+延迟加载 - 如何确定HTTP请求的优先级（它正在吃掉可用的连接）？

Question

我已经在我的网站上构建了自定义无限滚动，只需通过调用API端点，根据滚动方向加载6个下一个或前6个帖子：

$.get('/api/post/' + chunkToLoadNow + '/' + categoryToLoad + '/', function (response) {
   // appends or prepends a container with some html content
}

这完美无缺。关键是附加或前置的HTML还包含图像的延迟加载类，因此只要注入标记并且该部分在视口中，插件就会为6个缩略图发出6个http请求。有道理。

想象一下，我向下滚动，它加载（注入）6个帖子的内容并自动激活6个http请求图像然后我滚动得更快，现在下一个HTTP调用我的/api/post/2/0不会被调用直到延迟加载插件完成获取我不关心的图像，因为它们属于视口上方的一个块（我对下一个感兴趣）。

最后的效果是，当我滚动得足够快时，它会为2个块注入标记并请求12个图像，第3个块将需要等待很长时间，用户将会疯狂。

是否有JS方法可以退出已经启动但未完成的已打开的HTTP请求？或者，我可以以某种方式明确地将API端点的优先级设置为我网站中对jpeg的HTTP请求更重要吗？

Answer 1

您可以通过更改其src：

来中止图像加载请求

img.src = ''; 

对于正常的ajax请求，您可以执行以下操作：

var req = $.ajax(...); 
req.abort();