`
lifaming15
  • 浏览: 64723 次
  • 来自: ...
文章分类
社区版块
存档分类

JavaScript元素type属性达到预加载但不执行的效果

 
阅读更多

我们经常使用动态创建 JavaScript 的方式来实现 JavaScript 文件的无阻塞(Non-blocking)、并行下载(Parallel )。其实还可以添加自定义的 type 属性(比如 text/cache),达到预加载但不执行的效果:
var doc = document,
el = doc.createElement("script"),
head = doc.getElementsByTagName(''head'')[0];
el.src = "http://yui.yahooapis.com/2.8.2r1/build/yahoo-dom-event/yahoo-dom-event.js";
el.type = "text/cache";
head.insertBefore(el, head.firstChild);
注:Firefox 3.6.x 不请求 JavaScript 文件。
扩展阅读:
《Preload CSS/JavaScript without execution》
《Preloading JS and CSS as Print Stylesheets》

分享到:
评论

相关推荐

    图片预加载的js

    基本的JavaScript图片预加载方式是创建一个`<img>`元素,设置其`src`属性为待加载图片的URL,然后将其添加到DOM中。如下所示: ```javascript function preloadImage(url) { var img = new Image(); img.src = ...

    通过jQuery预加载图片的方法共1页.pdf.zip

    - 创建一个隐藏的`<img>`元素,将`src`属性设置为需要预加载的图片URL,当图片加载完成后,可以移除或显示该元素。例如: ```javascript var img = new Image(); img.src = 'path/to/image.jpg'; img.onload = ...

    利用CSS、JavaScript及Ajax实现图片预加载的三大方法

    这种方法在页面加载后才执行预加载,避免了增加初始加载时间,但依赖JavaScript,如果用户禁用了JavaScript,图片将不会被预加载。 方法二:仅使用JavaScript实现预加载 纯JavaScript预加载方法可以更灵活控制预...

    js预加载图片方法汇总

    - **用户体验**:预加载图片是为了提高用户体验,但如果图片不是必需的,或者用户可能不关心,那么预加载可能会浪费带宽,反而降低用户体验。 总的来说,JavaScript预加载图片技术可以提升网页的响应速度,尤其是在...

    javascript笔记整理

    3. **解释性**:JavaScript代码不需要预编译,浏览器会在加载HTML文档时逐行解释执行JavaScript代码,提高了效率。 4. **实时性**:JavaScript能够实时响应事件并立即更新页面,提供即时反馈。 5. **动态性**:...

    JavaScript笔记.doc

    6. 内置JavaScript对象:如Math、Date、Array等,提供了一系列预定义的方法和属性。 7. 处理对象的内置方法:例如字符串对象的substring()、length属性等。 8. 用户自定义对象:通过构造函数或对象字面量创建,可以...

    androidHtml5多属性选择

    优化策略包括缓存预加载、减少HTTP请求、使用异步加载和优化JavaScript代码等。同时,考虑使用`shouldOverrideUrlLoading()`方法来控制页面的加载,以避免不必要的网络请求。 7. 用户体验:为了提供良好的用户体验...

    html中js代码的加载顺序

    8. **预加载和预读取**:对于关键的JavaScript文件,可以使用`<link rel="preload" href="script.js">`或`<link rel="prefetch" href="script.js">`来预先加载或预读取资源,这样在用户需要时,脚本已经准备就绪。...

    javascript input自动赋值

    在上述例子中,无论使用原生JavaScript还是jQuery,我们都是通过获取input元素并设置其value属性来实现自动赋值的。这种方法对于动态页面尤其有用,比如从服务器获取数据后填充表单,或者根据用户的行为改变输入框的...

    最后加载js的代码

    简单来说,就是在确保页面主要内容已经呈现给用户之后再加载执行JavaScript代码。这样做的好处是: - **提升首屏加载速度**:用户可以在最短时间内看到页面的基本结构和内容。 - **减少资源阻塞**:避免了JS文件下载...

    JavaScript笔记

    JavaScript能够实现的功能非常广泛,包括但不限于: 1. **动态文本插入**:JavaScript允许开发者动态地修改HTML元素的内容,如通过`document.write`方法将可变的文本插入到HTML页面的特定位置。 2. **响应事件**:...

    JavaScript脚本中常用事件,例如:onClick事件等

    JavaScript是Web开发中不可或缺的一部分,它提供了一种与用户交互的方式,通过响应各种事件来实现动态效果和功能。本文将详细介绍JavaScript中的一些常见事件,包括onClick、onChange、onSelect、onFocus以及onLoad...

    关于预加载InstantClick的问题解决方法

    预加载InstantClick是一个用于提升网页加载速度的技术,它通过预先加载用户可能点击的链接内容,从而减少了页面切换时的等待时间,提高了用户体验。然而,在使用InstantClick的过程中,可能会遇到一些问题,本文将...

    JavaScript服本语言

    4. **解释性**:JavaScript 代码不需要预编译,而是由浏览器实时解析执行,这使得它能够快速地适应变化,但同时也可能导致性能上的限制。 JavaScript 与 Java 的主要区别: 1. **公司背景和用途**:JavaScript 由...

    WEB开发 之 JavaScript HTML DOM 事件.docx

    1. **事件响应**:当特定事件触发时,JavaScript可以执行预定义的代码。例如,当用户点击某个元素,加载网页,或者更改输入字段等,都可以设置对应的事件监听器来运行JavaScript函数。 2. **事件属性**:HTML元素...

    JavaScript基础语法

    JavaScript的设计目的是为了向HTML页面添加动态的行为,它是一种解释性语言,意味着代码在执行时不需要进行预编译。它的正式名称是"ECMAScript",这一标准由ECMA组织发展和维护。 JavaScript可以内嵌于HTML页面中,...

    Javascript学习笔记-学JS的一手教程

    JavaScript有一些预定义的保留关键字,例如`var`、`function`、`if`、`else`等,这些关键字不能作为变量名或函数名。 #### 2.4 JavaScript的基本语法 - **基本数据类型和常量**:JavaScript有六种基本数据类型:...

    如何通过javascript操作web控件的自定义属性

    然后,当页面加载到客户端时,这些自定义属性会作为HTML元素的属性存在,可以通过JavaScript访问。 在JavaScript中,我们可以使用DOM(文档对象模型)来操作这些元素。`getElementById`方法是获取指定ID元素的常用...

    javascript 动态加载 css 方法总结

    这种方法适用于已经存在的 CSS 文件,但需要注意的是,`@import` 只能在 CSS 文件内部或者 `<style>` 标签内使用,不能在 JavaScript 中直接执行。 2. **`document.createStyleSheet()`**: 这是 IE 浏览器特有的...

    javascript经典特效---动态的按钮.rar

    JavaScript可以获取并修改元素的CSS属性,比如`style.backgroundColor`或`style.cursor`,使得按钮在鼠标悬浮时呈现不同的视觉效果。 另外,动态按钮还可能涉及动画效果,比如按钮按下时的微小下沉效果或者加载时的...

Global site tag (gtag.js) - Google Analytics