Java对图片懒加载_页面性能优化-原生JS实现图片懒加载

在项目开发中，我们往往会遇到一个页面需要加载很多图片的情况。我们可以一次性加载全部的图片，但是考虑到用户有可能只浏览部分图片。所以我们需要对图片加载进行优化，只加载浏览器窗口内的图片，当用户滚动时，再加载更多的图片。这种加载图片的方式叫做图片懒加载，又叫做按需加载或图片的延时加载。这样做的好处是：1.可以加快页面首屏渲染的速度；2.节约用户的流量。

一.实现思路

1.图片img标签自定义一个属性data-src来存放真实的地址。

2.当滚动页面时，检查所有的img标签，判断是否出现在事业中，如果出现在视野中，继续进行判断，看齐是否被加载过了，如果没有加载，那就进行加载。

判断图片元素是否处于浏览器视野中的示意图(手绘)：

二.根据思路完成代码如下：

原生js实现图片懒加载

}ul{overflow:hidden;list-style:none;

}li{float:left;width:50%;height:200px;padding:10px;

}li img{display:inline-block;width:100%;height:100%;

}