ajax请求的数据怎样做图片懒加载？

这个很简单：

在 html页面，引入zepto.lazyLoad.min.js，（是因为我使用的是zepto.min.js）

如果使用的是jquery.min.js框架，就引入jquery.lazyLoad.min.js，这里不赘述了。

主要是在ajax方法里，

把获得的img的拼接那里，有三点注意的地方！！！

1.class="test-lazyload" 

2. data-original="'+curriculums[i].imgUrl+'" 

3. src="'+GLOBAL_G.lazyImg+'"

html2+='<div class="imgBg"><img class="test-lazyload" data-original="'+curriculums[i].imgUrl+'" src="'+GLOBAL_G.lazyImg+'"></div>'

然后再append之后，调用$('.test-lazyload').picLazyLoad()

就可以了！！！！

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

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

lazyLoad.html

图片先用占位符表示，不要将图片地址放到src属性中，而是放到其它属性(data-original)中

页面加载完成后，监听窗口滚动，当图片出现在视窗中时再给它赋予真实的图片地址，也就是将data-original中的属性拿出来放到src属性中

在滚动页面的过程中，通过给scroll事件绑定lazyload函数，不断的加载出需要的图片

注意：请对lazyload函数使用防抖与节流，不懂这两的可以自己去查

3.可视区加载

这里也分为两种情况

1、页面滚动的时候计算图片的位置与滚动的位置

2、通过新的API： IntersectionObserver API（可以自动"观察"元素是否可见）

如上，data- 属于自定义属性， ele.dataset. 可以读取自定义属性集合

img.srcset 属性用于设置不同屏幕密度下，image自动加载不同的图片，比如<img src="image-128.png" srcset="image-256.png 2x" />

预加载

提前加载图片，当用户需要查看时可直接从本地缓存中渲染

加载方式目前主要有两种

待到满足触发条件后，再通过JS渲染

---