html5-自定义数据与js加载

data自定义数据

dataset

- data-name:dataset.name

- data-name-first:dataset.nameFirst

Data数据在jquery mobile中有着重要作用

// data- 前缀必须有
<div id="div1" data-miaov="miaov"
  data-miaov-all = "miaovkt"
>div</div>

<script>
window.onload = function() {
  var oDiv = document.getElementById(‘div1‘);
  alert( oDiv.dataset.miaov ); // miaov
  alert( oDiv.dataset.miaovAll ); // miaovkt
  // 最常用的形式 就是将html 和 js分离 利用自定义属性设置html的样式 knockoutjs.com
}
</script>

延迟加载JS

js的加载会影响后面的内容加载

- 很多浏览器都采用了并行加载JS, 但还是会影响其他内容

HTML5的defer和async

- defer:延迟加载,会按顺序执行,在onload执行前被触发

- async:异步加载,加载完就触发,有顺序问题

Labjs库 异步加载的库

// js是单线程 会从上向下执行(可能出现白屏) defer可用于延迟加载(先加载其下面内容)
 // 如果三个js都给defer 理论上三者按顺序执行, 实际可能乱序执行
<script src="a.js" defer="defer"></script>
<script src="b.js"></script>
<script src="c.js"></script>

<body>
  <img src="" />
</body>

// async异步加载 四个同时加载,谁先加载完毕谁先执行,执行顺序无法保证
  // dom 元素可能找不到对象
  // 如果彼此存依赖关系 如c的加载依赖b, 那么可能无法成功加载c
// 一般用于 独立加载项 如广告 当网站加载完毕的时候 我们不需要立刻加载它
<script src="a.js" async="async"></script>
<script src="b.js" async="async"></script>
<script src="c.js"  async="async"></script>

<body>
  <img src="" />
</body>

原文地址:https://www.cnblogs.com/wssjzw/p/9302333.html

时间: 2024-11-02 22:27:37

html5-自定义数据与js加载的相关文章

FusionCharts简单教程(二)-----使用js加载图像和setDataXML()加载数据

前面一篇对FusionCharts进行了一个简单的介绍,而且建立了我们第一个图形,但是那个是在HTML中使用<OBJECT> 和<EMBED>标记来加载图形的,但是这样做是非常不“理智”的.这样做除了代码量比较大外,还有并不是所有的人能够看懂上面的代码.但是 使用JS后就可以避免上面几个问题了. 一.使用JS加载FusionCharts图形 下面就分五个步骤讲解如何使用js来加载FusionCharts图形. 第一步:导入FusionCharts.js文件 [javascript]

CSS实现树形结构 + js加载数据

看到一款树形结构,比较喜欢它的样式,就参照它的外观自己做了一个,练习一下CSS. 做出来的效果如下: ul,li { list-style-type: none } .tree { display: block; position: relative; padding: 5px 15px } .tree span { display: inline-block; height: 30px; line-height: 28px; min-width: 60px; text-align: cente

javascript不依赖JS加载顺序事件对象实现

背景: 在现在WEB开发中,稍复杂一点的页面,都会涉及到多个模块,尤其是类似seajs.LABjs.requireJS等模块工具出来后,前端开发者分模块开发已经慢慢变成一种习惯了,但是多个模块间的常常有各种交集,需要通信.需要互相调用,这时监听者模式便是必不可少的一种设计模式了,在前端表现事件操作.backbone和jquery都有提供了很好的事件处理方式. 但是,真正开发需求的时候我们常常会遇到文件加载顺序跟事件监听与更新不一致的需求,比如说:在一个视频网站里面,有一个视频处理的JS模块和用户

js加载xml文件xin

js加载xml文件 作为刚进入软件开发大军的我,以一个水军的资格开始做梦,以一个画者的资格在'一张白纸'上开始涂抹.工作在哪里??工作在哪里呢??? 今天发现一道面试题: 附件中有一个城市列表的city.xml文件,现在需要您通过Javascript脚本对该文件进行解析,然后将城市列表还原到下拉列表框中:当选择下拉列表框时,在对应的文本框中显示该城市信息(界面布局请参考test1.html文件,也可以自行定义). 上网查了一天的资料,绞尽脑汁的试着网上前辈的各种方法,为什么一个个别人成功的案例,

HTML5的学习--performance获取加载时间的工具

前段时间因为项目需要获取页面加载的时间,就去看了下HTML5中的performane. 可以用其获得页面详细的加载时间. 关于performance的详细内容可以查看 http://www.cnblogs.com/CraryPrimitiveMan/p/3795086.html 之后用performane写了一个小工具,用来获取页面详细的加载时间. GitHub上的地址是:https://github.com/CraryPrimitiveMan/performance-tool 只在chrome

【随笔】js加载

有时候,当发现js操作一个dom的时候,发现dom没有找到,这是由于html没有加载完就开始操作该dom的缘故,所以需要在html文档加载完后再加载js,于是我们可以这么做: js方法:window.onload 当一个文档完全下载到浏览器中时,才会触发window.onload事件.这意味着页面上的全部元素对js而言都是可以操作的,也就是说页面上的所有元素加载完毕才会执行.这种情况对编写功能性代码非常有利,因为无需考虑加载的次序. window.onload=function(){ alert

Plist数据表格的加载详细事例

1.本次主要加载单一字典的plist数据(app.plist),形式如下 2.加载plist数据,先将数据字典转换成对应的模型,本例子所用的是各个应用的图标,对应的就应该创建一个应用图标的模型huapp(名称自拟).在头文件中定义所有变量,以及将字典转换成模型数据的两个方法,如下图: 类方法调用对象方法,在对象方法中转换模型 注意:在对象方法中属性的转化还可已使用KVC,一句代码就解决 [self setValuesForKeysWithDictionary:dict]; 但是使用KVC,就会将

(转)JS加载顺序

原文:http://blog.csdn.net/dannywj1371/article/details/7048076 JS加载顺序 做一名合格的前端开发工程师(12篇)--第一篇 Javascript加载执行问题探索 楼主做前端开发一年多了,对前端的见解还是多多少少有一点的,今天特拿出来跟大家分享分享. 做前端开发少不了各种利器.比如我习惯用的还是Google浏览器和重型武器Fiddller. 一: 原始情况 首先大家看看如下的代码: 1 <%@ Page Language="C#&qu

js便签笔记(8)——js加载XML字符串或文件

1. 加载XML文件 方法1:ajax方式.代码如下: var xhr = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject("Microsoft.XMLHTTP"); xhr.open("GET", "data.xml", false); xhr.send(null); var xmlDoc = xhr.responseXML; console.log(xmlDoc