懒加载是只加载当前页面的图片,那么如果当前页面的图片因为请求较慢的时候,位置会显示空白这样对应用户来说比较不友好。那么是否可以考虑一下在图片请求加载完毕之前,使用别的进行占位来告知用户这一块是用于图片渲染的,只是因为图片大或者网络的原因无法进行展示。第一个想法是img Dom对象应该是有个字段告知是否加载完成的。经过mdn查询,是有个属性来表示否是加载成功的,htmlImageElement.complete,当为true的时候表示图片已经加载完毕。
通过定时函数不断进行判断htmlImageElement.complete是否为true,当true的时候关闭定时器;如果图片加载失败,在IE中complete的值一直为false,而其他浏览器最后会变为true。这点需要留意。
如果图片太多的话,那么每个节点都要判断是不是太繁琐了。于是想了第二种,是否可以使用背景色占位,然后图片加载好了会直接覆盖掉背景色。
经过一番实践实现了该效果。当图片没有加载完成时显示背景色,等加载完毕后显示正确的图片。
图一是图片为加载完成前显示的样式,图二是图片加载完成后的样式。
现在还没发现啥问题,如有问题欢迎提出。