html 加载图片资源,js如何阻止图片的其他资源的加载(DOMContentLoaded)

js中使用DOMContentLoaded事件，可以阻止图片等资源的加载，因为DOMContentLoaded事件只在加载图片资源之前执行的。下面给出一个测试的代码。

//window.addEventListener('DOMContentLoaded', function (event) {

//document.addEventListener('DOMContentLoaded', function (event) {

addEventListener('DOMContentLoaded', function (event) {

var myimg = document.getElementById('myimg');

myimg.src='https://www.baidu.com/img/bd_logo1.png';

});

执行这段代码，可以看到两点

1. 最终显示的是图片是bd_logo1.png

2. 图片 file_not_exists.jpg 是被阻止加载了。

通过浏览器看看最终的执行

可以看到的显示的 (canceled) 。表示取消的对原图的加载。

当初始的 HTML 文档被完全加载和解析完成之后，DOMContentLoaded 事件被触发，而无需等待样式表、图像和子框架的完成加载。另一个不同的事件 load 应该仅用于检测一个完全加载的页面。 在使用 DOMContentLoaded 更加合适的情况下使用 load 是一个令人难以置信的流行的错误，所以要谨慎。注意：DOMContentLoaded 事件必须等待其所属script之前的样式表加载解析完成才会触发。

了解更多