尝试使用 javascript 停止图像加载

Question

有没有办法用javasript停止图像下载？我想从图像标签中提取所有网址，并仅在用户滚动到特定标签时才开始加载图像。我知道我可以通过以下方式停止下载

window.stop()

但是通过使用此解决方法，浏览器也会停止加载 CSS 文件中定义的背景图像。

那么有没有一种方法可以在不实现“标记解决方法”（例如“将图像 url 包含到跨度或其他内容中”）的情况下实现这一目标。

Answer 1

您可以使用 JavaScript 完全删除 src 属性，这将有效地阻止图像被下载。

var img = document.getElementById('imageID'),
    src = img.getAttribute('src');

img.removeAttribute('src');

这将确保如果用户禁用了 JS，您的图像仍然会被加载，因为您稍后将使用 JS 删除 src 属性。

然后，您可以将 url 存储在变量中，并在想要再次加载它们时将其设置回来。

img.setAttribute('src', src);

关键点是不要留下空的 src 属性（src=""），否则浏览器将把它视为“/”，实际上是在尝试加载您的主页并将其存储在图像中元素。您必须完全删除 src 属性。

Answer 2

我遇到了类似的问题，以下是我的解决方法：

简而言之：

在创建元素时，我制作了 src='Blank.gif' 并创建了 setAttribute("data-src",response[i].photo_url)。由于 Blank.gif 不存在，如果下面的代码不起作用，或者加载速度不够快，它将被渲染为损坏的图像链接...

然后，onscoll 我查看了一下当它在视图中并将 src 设置为“data-src”时。这对我来说非常有效...

详细信息！

window.onscroll = function() {

  var top = document.body.scrollTop;
  var bottom = document.documentElement.clientHeight + top;

  var img;

  for (var i=startImage;i<index;i++){
    img = document.getElementById("image" + i);
    var a = img.style.top.substring(0,img.style.top.length-2);
    var b = bottom;//Just for simplicity...
    if (a < b) {
        if (img.src.indexOf('Blank.gif') != -1) {
            img.src = img.getAttribute("data-src");
        }
        startImage++;
    }
  }
}

希望这可以节省其他人 2 1/2 小时的搜索/工作！

如果您认为有一种方法可以提高上述效率，请随时告诉我！