优点:1:图片没加载出来时,显示提前设定好的图片,等图片加载好后在显示需要显示的图片
2:当页面滑动到一定的位置时才加载所需要的图片,否则不加载
代码:
src:图片没有加载完成时提前显示的图片: data-original:图片加载完后所需要显示的图片,最终会显示data-original中的图片
src可不写,默认是一张灰色图片
<img class="lazy" src="img/viper_1.jpg" data-original="img/bmw_m1_hood.jpg" width="765" height="574">
<img class="lazy" src="img/viper_1.jpg" data-original="img/bmw_m1_side.jpg" width="765" height="574">
<img class="lazy" src="img/viper_1.jpg" data-original="img/viper_1.jpg" width="765" height="574">
<img class="lazy" src="img/viper_1.jpg" data-original="img/viper_corner.jpg