发表于： 2017-06-24 22:08:50
0 800
今天做了啥/收获：
原来懒加载模块和懒加载图片是不一样的！还要引入不同的俩文件。
图片的src不要使用真实地址， 用一个属性保存在元素上
把所有需要使用延迟加载的图片放到一个数组中
初始化的时候检查数组中的元素是否在可视范围内 ,可视范围内即加载
给window绑定滚动事件检查图片是否在可视范围内
加载完成的图片从列队中删除
应用场景
很多图片没出视在视野就已经加载了，用angular-imglazyload 可以做到让图片出现在可视范围内在去加载，避免不必要的请求
安装
要跑demo环境要求
node , bower , npm , gulp
安装
npm install && bower install
运行
gulp serve
使用
html
<body ng-app="demo" ng-controller="demoCtro" class="row text-center">
<div class="content">
<img src="" ng-repeat="item in imgs track by $index" data-ui-lazyload="{{your img url}}" />
</div>
</body>
js
// 在你的module里添加lazyload依赖就好
var app = angular.module('demo' , ['lazyload']);
我特么还得学下, bower , npm , gulp真是作大死
问题- =到头来现在也没搞好 官方文档就是这么的短小精悍
返回列表
评论