懒加载的作用和原理:
在我们展示多图片的场景下,类似淘宝或者百度图片,由于图片的数目过多,全部从服务器请求会给用户糟糕的用户体验, 为了提升用户体验,我们这里使用懒加载,随着下拉逐步加载。
每个图片的src会有一个get请求,我们把不能看到的图片src设置为相同的图片,这些图片发一次请求即可,设置属性data-src为真正的图片路径。当图片滚动到可视区,我们就用js把data-src 赋值给 src,简单的懒加载就可以实现了。
为了提高体验,添加节流函数,避免频繁滚动鼠标下拉页面时连续不间断调用函数。
网友评论