Question

我正在寻找一种使用javascript取消图片加载的方法。我已经看过其他问题并隐藏它们是不够的。此外，页面的其余部分必须加载（window.stop（）是不可能的。）

正在加载的页面不在我的控制之下，只保证一件事 - 页面上的第一个<script>是我的javascript（轻量级 - 没有jquery）。

我已经尝试将所有img源设置为空，这没有帮助，因为dom是在解析页面后创建的，并且所有浏览器都具有相同的行为 - img在解析后加载。

Answer 1

现代浏览器无法实现。即使您使用JavaScript浏览器更改图像标记的src属性仍然坚持加载图像。我通过开发Lazy Load plugin来了解这一点。

Answer 2

我可以看到停止加载图片的唯一方法是图片本身不存在src属性，并使用自定义data-*属性来保存图片的位置：

<img data-src="http://path.to/image.png" />

显然，对于那些（通常很少见）禁用JavaScript的浏览器，这并没有优雅地降级，因此需要noscript回退：

<img data-src="http://path.to/image.png" />
<noscript><img src="http://path.to/image.png" /></noscript>

当您或您的用户为他们做好准备时，可以通过一个简单的功能来加载图像：

/* simple demo */
function imagePopulate(within, attr) {
    within = within && within.nodeType == 1 ? within : document;
    attr = attr || 'data-src';
    var images = within.getElementsByTagName('img');
    for (var i = 0, len = images.length; i < len; i++) {
        if (images[i].parentNode.tagName.toLowerCase() !== 'noscript') {
            images[i].src = images[i].getAttribute(attr);
        }
    }
}

document.getElementById('addImages').onclick = function(){
    imagePopulate();
};

JS Fiddle demo

我无法确定所有浏览器，但这似乎适用于Chrome（因为从查看开发人员工具的网络标签中没有尝试加载{{ 1}} - 包含noscript）。

Answer 3

回顾onload event：

window.onload=function(){
imgs = document.getElementsByTagName('img');

for(i = 0; i < imgs.length(); i++){
imgs[i].src = '#';
}
};

Answer 4

您需要代理。

您的脚本可以使用类似

的内容重定向到其他服务器

location.replace('http://yourserver.com/rewrite/php?url='+escape(this.href));

也许您告诉我们您为什么要取消图片加载以及您正在加载哪个网站，以便我们能够提出更好的解决方案

如果除了图像之外页面上没有任何内容，您可以尝试

document.write('<base href="http://yourserver.com/" />');

会破坏网页上所有非绝对的src和href。

更新可怕的黑客但也许这个几乎是伪代码（我上床睡觉）会做些什么

document.write('<script src="jquery.js"></script><div id="myDiv"></div><!-'+'-');
$(function() { 
  $.get(location.href,function(data) {
    $("#myDiv").html(data.replace(/src=/g,'xsrc='));
  });
})

Answer 5

如果您只想取消加载图像，可以使用sємsєм的解决方案但我认为它不会通过使用窗口onload事件。

您可能需要提供一个按钮来取消图像加载。另外我建议，不要将src属性设置为“＃”，而是可以使用删除src属性本身的的removeAttribute（）

[确保在测试时停用缓存]

Answer 6

可以与网络工作者一起完成。请参阅以下示例： https://github.com/NathanWalker/ng2-image-lazy-load

停止网络工作者会取消浏览器中的图片加载

javascript取消图片加载

6 个答案: