JavaScript无限滚动+；延迟加载-如何对HTTP请求进行优先级排序（它占用可用的连接）？

我已经在我的网站上建立了自定义无限滚动，通过调用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请求，然后我滚动得更快，现在对我的

/api/post/2/0

的下一个http调用将不会被调用，直到惰性加载插件完成获取图像，我不关心这些图像，因为它们属于视口上方的块（我对下一个感兴趣）

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

---

是否有一种JS方法可以退出已启动但尚未完成的已打开HTTP请求？或者我可以明确地将API端点的优先级设置为与我的网站中JPEG的HTTP请求同等重要吗？

您可以通过更改其src来中止图像加载请求：

img.src = ''; 

对于普通ajax请求，您可以执行以下操作：

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

---

您是否优化了图像以减少加载时间？不知道为什么用户会在等待加载12个缩略图时发疯，因为这些缩略图的质量是一流的。这些图像很小，但文件的重量很好…@slick可能会使用一个好的缓存来加速图像的传递或您的图像，并使用两个图像：一个质量好，一个非常小的缩略图。@slick我不确定为什么这必须是同步的。您可以继续滚动和显示数据，并使用延迟加载，在从服务器接收到图像时，使用图像填充数据。你能用你的代码发布一个简单的工作示例吗？