如何在不使用window.stop（）的情况下中止图像加载请求

小编典典

如何在不使用window.stop（）的情况下中止图像加载请求

ajax

我有一个很长的页面，可在用户滚动浏览时动态加载图像。

但是，如果用户快速滚动离开页面的某个部分，我不希望图像继续加载到页面的该部分视图之外。

除了图像加载外，页面上还同时发生了许多其他请求，因此在scroll事件上触发钝化window.stop（）是不可接受的。

我尝试删除并清除不再可见的图像的img src属性，但是，由于请求已经启动，因此图像会继续加载。

请记住，当用户短暂滚动经过页面的那部分时，图像src已被填充。但是一旦过去，如果不使用window.stop（），就无法停止加载该图像。清除src无效。（Chrome和FF）

阅读 276

2020-07-26

共1个答案

小编典典

正如nrabinowitz所提到的，您正在尝试做的是错误的方法。您不能只是“取消”图像的加载过程（将src属性设置为空字符串不是一个好主意）。实际上，即使这样做，也只会使情况变得更糟，因为服务器将不断发送会被取消的数据，从而增加了负载率并降低了速度。另外，请考虑以下事项：

如果您的用户在页面上上下滚动，则可能会导致加载延迟。
在开始加载页面的一部分之前具有超时延迟（例如200毫秒）是完全可以接受的，并且在页面上间隔200毫秒后，一次停止并跳转多少次？即使发生，也可以回到第1点
您的图片有多大？即使是速度较慢的服务器，每秒也可以提供大约几十个3Kb的缩略图。如果您的网站具有较大的图像，请考虑将低分辨率和高分辨率图像与lightBox等组件一起使用

通常，计算机问题仅仅是设计问题。

编辑

这是一个主意：

您的页面应显示DIV具有预期图像大小的宽度和高度的容器（使用CSS设置样式）。在每个内部DIV，添加一个链接。例如：
```
<div class="img-wrapper thumbnail">
```
href="http://www.domain.com/path/to/image">Loading…

添加此Javascript（未经测试，想法是自我描述的）

$(function() {

var imgStack;
var loadTimeout;

$(window).scroll(function() {
imgStack = null;
if (loadTimeout) clearTimeout(loadTimeout);

loadTimeout = setTimeout(function() {

  // get all links visible in the view port
  // should be an array or jQuery object
  imgStack = ...

  loadNextImage();

}, 200); // 200 ms delay
});

function loadNextImage() {
if (imgStack && imgStack.length) {
var nextLink = $(imgStack.pop()); // get next image element

  $('<img />').attr('src', nextLink.attr('href'))
    .appendTo(nextLink.parent())
    .load(function() {
       loadNextImage();
    });

  // remove link from container (so we don't precess it twice)
  nextLink.remove();

}
};

});

2020-07-26