angularjs如何实现图片延迟加载？

JavaScript030

angularjs如何实现图片延迟加载？,第1张

jquery的做法是监听window.scroll，然后判断图片的位置，是否需要切换src属性，那么angular也一样，只是由于angular需要将DOM操作写在指令里面，所以需要自己去实现指令。

解决思路：

1，图片的src不要使用真实的地址，用一个属性保存在元素上

2，把所有需要使用延迟加载的图片放到一个数组中，

3，初始化的时候检查数组中的元素是否在可视范围内，可视范围内即加载

4，给window绑定滚动事件检查图片是否在可视范围内

5，加载完成的图片从队列中删除

目测你找的JS插件不杂滴，好的插件是这样的。页面中的图片是没有src的，而是把它的路径放在data-lazy-src属性里面，当滚动的时候自动加载图片的src，当然只能是加载一次。

去网上搜一下。scrollLoading