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

栏目: JavaScript · 发布时间: 7年前

内容简介:js中使用可以看到的显示的

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <script>
        //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';
        });
    </script>
</head>
<body>
<img src='file_not_exists.jpg' id='myimg' />
</body>
</html>

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

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

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

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

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

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

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

了解更多


以上所述就是小编给大家介绍的《js如何阻止图片的其他资源的加载(DOMContentLoaded)》,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对 码农网 的支持!

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

人月神话(40周年中文纪念版)

人月神话(40周年中文纪念版)

(美) 布鲁克斯(Brooks, F. P.) 著 / UML China翻译组,汪颖 译 / 清华大学出版社 / 2015-4-1 / 68.00元

在软件领域,很少能有像《人月神话》一样具有深远影响力和畅销不衰的著作。Brooks博士为人们管理复杂项目提供了最具洞察力的见解,既有很多发人深省的观点,又有大量软件工程的实践。本书内容来自Brooks博士在IBM公司SYSTEM/360家族和OS/360中的项目管理经验,该项目堪称软件开发项目管理的典范。该书英文原版一经面世,即引起业内人士的强烈反响,后又译为德、法、日、俄、中、韩等多种文字,全球......一起来看看 《人月神话(40周年中文纪念版)》 这本书的介绍吧!

在线进制转换器
在线进制转换器

各进制数互转换器

Markdown 在线编辑器
Markdown 在线编辑器

Markdown 在线编辑器

UNIX 时间戳转换
UNIX 时间戳转换

UNIX 时间戳转换