JS 实现页面的懒加载

JavaScript027

JS 实现页面的懒加载,第1张

页面加载来自网络的图片时,可能会花费大量的时间,因此如果使用懒加载,能够让用户体验不到加载的过程

至此,我们便可以在页面中使用懒加载来优化用户体验了。

lazyLoad.html

思路的问题。

一般我们只依靠onload或者document.ready事件来判断页面是否加载完毕,因为loading状态没有意义。因为页面完全加载之前,我们无法了解哪些东西已经加载了,如果这个时候调用js或者html元素可能产生错误。

页面加载之前是没有任何事件的。所谓加载之前的动画是形如以下的代码

<html>

<body

onload="第一个div隐藏,第二个div显示">

<div>

<img

src='loading.gif'

style="width:

100%"

/>

</div>

<div

style="diaplay:

none">

<!--页面内容在这里加载-->

</div>

</body>

</html>