研究网格化城管系统随笔

在easyUI中data-options属性是什么意思:?

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

猜你喜欢

转载自www.cnblogs.com/Viserion/p/9756035.html