瀑布流布局一般用于图片布局,其视觉表现为参差不齐的多栏布局,随着页面的滑动,会不断加载新的图片。
懒加载主要用于实现提高系统的响应速度。对于图片比较多的网页,如果一次性加载出所有的图片,会导致系统的加载时间较长,用户等待时间也很长。而懒加载则在用户需要查看图片的时候才加载他,从而使系统可以更快的加载图片。
懒加载主要的实现方式是:先设置所有的图片的src都为同一个背景图片(如loading图片),同时每个图片都设置一个属性存储真正的图片路径,然后在图片加载到屏幕中是,将真正图片的路径传给src。
HTML代码:
<body>
<div id='container'>
<div class='box'><img dataSrc="images/1.jpg" src="images/loading.gif"></div>
<div class='box'><img dataSrc="images/2.jpg" src="images/loading.gif"></div>
<div class='box'><img dataSrc="images/3.jpg" src="images/loading.gif"></div>
<div class='box'><img dataSrc="images/4.jpg" src="images/loading.gif"></div>
<div class='box'><img dataSrc="images/5.jpg" src="images/loading.gif"></div>
<div class='box'><img dataSrc="images/6.jpg" src="images/loading.gif"></div>
<div class='box'><img dataSrc="images/7.jpg" src="images/loading.gif"></div>
<div class='box'><img dataSrc="images/8.jpg" src="images/loading.gif"></div>
<div class='box'><img dataSrc="images/9.jpg" src="images/loading.gif"></div>
<div class='box'><img dataSrc="images/10.jpg" src="images/loading.gif"></div>
<div class='box'><img dataSrc="images/11.jpg" src="images/loading.gif"></div>
<div class='box'><img dataSrc="images/12.jpg" src="imag