关于图片的应用,一般都会包含列表页和详情页。当列表页的图片不断增加的时候,内存也会不断增加。特别在IE浏览器会更加的明显。
这时候我们需要对现有的策略进行优化?
内存的不断增加的原因,是图片的不断增加。所以我们要删除图片。
比如当用户的翻到第五页的时候,我们可以把第一屏的图片删除掉。使得页面上最多显示五屏的数据。
通过这种策略,可以把内存控制在稳定的水平上。
当滚动条位置变化的时候,我们需要判断当前是第几页,然后以显示五屏图片为原则。删除其他的图片。
上面我们主要是通过删除图片的方式来减少内存,其实还可以通过减少对事件的绑定,来减少内存。
第一种:
var img = document.createElement("IMG");
img.onload =function () {
null
};
img.src = data.objurl_l;
第二种:
li.innerHTML = '<a href="#" οnlοad="check()" />';
这两种创建图片的方式,显然第二种会花费更少的内存。
当需要给很多图片绑定事件的时候,我们有一个更加高效的方式。就是给这些父元素绑定一个事件。当事件触发时候,通过e.target方式找到目标元素。