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

JavaScript019

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

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

解决思路：

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

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

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

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

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

$("img").lazyload({

placeholder : "img/grey.gif",

effect : "fadeIn"

})

$("img")是选择器，根据自己的标签自行修改就可以了

placeholder：（默认图片路径），

effect:（载入方式）

还有其他的参数需要看情况使用了