Question

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

停止下载

window.stop()

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

有没有一种方法可以实现这一目标，而无需实现“标记解决方法”，例如“将图像网址包含在跨度或其他内容中”。

Answer 1

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

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

img.removeAttribute('src');

这将确保在用户禁用JS时仍会加载您的图像，因为您稍后将使用JS删除src attributer。

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

img.setAttribute('src', src);

关键是它没有留下空的src属性（src=""），否则它将被浏览器视为'/'，实际上是试图加载你的主页并将其存储在image元素中。您必须完全删除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个半小时的搜索/工作！

如果您认为有办法提高上述效率，请随时告诉我们！

尝试使用javascript停止图像加载

2 个答案: