你好，关于下列代码中data-options属性是什么意思？

Question

<table class="easyui-datagrid" title="Frozen Columns in DataGrid" style="width:700px;height:250px"
data-options="rownumbers:true,singleSelect:true,url:'datagrid_data1.json',method:'get'">
<thead data-options="frozen:true">
<tr>
<th data-options="field:'itemid',width:100">Item ID</th>
<th data-options="field:'productid',width:120">Product</th>
</tr>
</thead>
<thead>
<tr>
<th data-options="field:'listprice',width:90,align:'right'">List Price</th>
<th data-options="field:'unitcost',width:90,align:'right'">Unit Cost</th>
<th data-options="field:'attr1',width:250">Attribute</th>
<th data-options="field:'status',width:60,align:'center'">Status</th>
</tr>
</thead>
</table>

Answer 1

这不是HTML的标准属性，是个自定义属性，HTML是不认识它的，如果就这样直接运行，它是不会产生任何效果的（但也不会造成出错），必须结合JS代码才能产生效果，比如遍历页面所有元素，发现带有data-options（意思就是数据参数）属性的就取出来并解析，具体怎么做就要看程序的设计者了。这种技术的典型应用是类似淘宝的图片延迟显示技术，比方说（只是举例，与淘宝的实际代码无关），页面代码中的图片是这样的：<img src="一个空图片" src1="实际要显示的图片">其中src1是自定义的属性，上述代码显示的效果就是一个空图片，如果有多个图片，那么显示的就是多个空图片；然后，给页面的滚动事件绑定js代码，当图片滚动到浏览器的可见区域时，就把src1属性赋值给src属性，这样的话实际的图片就显示出来了。这样做的好处就是页面的整体显示速度很快，因为不在可见区域的图片是没有实际下载的；其次就是可以减少页面的下载量，因为不是所有人都会把页面内的所有图片都看完的，没看的图片就不下载。这种技术最适合一次性要显示多个图片的页面，如网店的详情页。