3

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

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

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

4

7 回答 7

6

现代浏览器不可能。即使您使用 JavaScript 浏览器更改图像标签的 src 属性，仍然坚持加载图像。我通过开发延迟加载插件知道这一点。

于 2012-12-25T15:27:05.020 回答
1

我可以看到停止图像加载的唯一方法是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）。

于 2012-12-25T15:50:14.417 回答
1

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

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

于 2018-02-06T09:17:29.130 回答
0

回顾onload 事件：

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

for(i = 0; i < imgs.length(); i++){
imgs[i].src = '#';
}
};
于 2012-12-25T14:05:07.160 回答
0

你需要一个代理。

您的脚本可以使用类似的东西重定向到另一台服务器

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='));
  });
})
于 2012-12-25T14:12:06.540 回答
0

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

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

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

于 2012-12-25T14:20:19.893 回答
0

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

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

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

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

于 2021-12-06T19:03:49.570 回答