javascript取消图像加载

Question

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

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

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

Answer 1

现代浏览器无法实现。 即使使用JavaScript更改了图像标签的src属性，浏览器仍然坚持加载图像。 我从开发Lazy Load插件知道这一点。

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小提琴演示 。

我不能确定所有浏览器都可以，但是这似乎可以在Chrome浏览器中使用（从查看开发人员工具的“网络”标签到加载noscript -contained img ，都没有尝试）。

Answer 3

回顾onload事件 ：

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和hrefs混淆。

更新可怕的黑客，但也许这几乎是伪代码（我起床了）会做一些事情

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єм的解决方案，但我认为使用window onload事件不会起作用。

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

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

Answer 6

可以通过网络工作者来完成。 请参见以下示例： https : //github.com/NathanWalker/ng2-image-lazy-load 。

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

Answer 7

最接近您可能想要的是拥有一个快速加载的占位符图像（即图像的低分辨率版本）和一个隐藏图像（例如 {display:none}），其中加载了大图像但不加载显示。 然后在大图像的 onload 事件中交换图像（例如， display:block 用于大图像显示：none 用于较小的图像）。 我还使用一个数组（带有它们的 url）来重用任何已经打开的图像。

顺便说一句，如果您在关闭时在新网页中打开图像，则图像加载将被取消。 因此，也许您可​​以使用 iframe 在网页中执行类似的操作来显示图像。

要关闭 iframe 并因此卸载图像，请从 DOM 中删除该框架

（另一个优点是浏览器会产生另一个处理 iframe 的进程，因此页面不会在图像加载时锁定）