标签:定义 自定义属性 version 改变 color 异步加载 XML 完整 document
loadImage = function(arr,index){
var self = this,
oBox = document.getElementsByName("img");
if(arr.length == 0){
for(var len = oBox.length, i = 0; i < len; i++){
arr.push(oBox[i].dataset.src);
}
}
var oImage = document.createElement("img");
oImage.src = arr[index];
oImage.onload = function(){
oBox[index].innerHTML = "";
oBox[index].appendChild(oImage);
if(index+1==arr.length) return;
self.loadImage(arr, index+1);
};
}
HTML5中我们可以使用data-
前缀设置我们需要的自定义属性,来进行一些数据的存放,例如我们要在一个文字按钮上存放相对应的id:
<a id=“day2-meal-expense” href="javascript:" data-id="2312">测试</a>
这里的data-
前缀就被称为data属性
,其可以通过脚本进行定义,也可以应用CSS属性选择器进行样式设置。数量不受限制,在控制和渲染数据的时候提供了非常强大的控制。
var expenseday2 = document.getElementById(‘day2-meal-expense‘); var typeOfDrink = expenseday2.dataset.id;
如果使用传统的方法获取属性值应该会类似下面:
var typeOfDrink = document.getElementById(‘day2-meal-expense‘).getAttribute(‘data-drink‘);
使用dataset
操作data
要比使用getAttribute
稍微慢些.如果我们只是处理少量的data数据,这种速度上差异造成的影响是基本上没有的。反而,我们应该看到,使用dataset
操作自适应属性要比其他类似getAttribute
的形式要少很多让人头疼的麻烦,并且更具有可读性。使用dataset
获取元素的自定义属性是个很不错的方法。虽然说使用dataset
不能提高代码的性能,但是对于简洁代码,提高代码的可读性和可维护性是很有帮助的。
二、滚动加载
$(window).scroll(function () { var scrollTop = $(this).scrollTop(); var scrollHeight = $(document).height(); var windowHeight = $(this).height(); if (scrollTop + windowHeight + 15 > scrollHeight) { // todo } });
标签:定义 自定义属性 version 改变 color 异步加载 XML 完整 document
原文地址:http://www.cnblogs.com/chenlogin/p/6565570.html