开发网页,jQuery一大堆lazyload的插件,现在用Angularjs,自己写不出来啦,找了两个插件。
angular-lazy-image.js
https://github.com/afklm/ng-lazy-image
非常不错的插件,功能齐全,听说可能会并入到Angular中去。
下载js
<pre>npm install angular-lazy-image</pre>
放入头文件
<pre><script src="lazy-image.min.js"></script></pre>
依赖注入
<pre>angular.module('yourapp', ['afkl.lazyImage'])</pre>
修改src
<pre><div afkl-lazy-image="//placehold.it/480x480 480w, //placehold.it/768x768 768w, //placehold.it/936x936"
class="afkl-lazy-wrapper afkl-img-ratio-1-1 own-classname"></div></pre>
但是目前用了ionic的前端框架,图片加载不了,可能样式冲突乱套了。所以改用下面这个了。
<h2>ionic-image-lazy-load.js</h2>
https://github.com/paveisistemas/ionic-image-lazy-load
配套ionic框架,功能稍微少一点,但是足够用了。
下载js
<pre>bower install ion-image-lazy-load --save</pre>
放入头文件
<pre><script src="path/to/ionic-image-lazy-load.js"></script></pre>
依赖注入
<pre>angular.module('yourapp', ['ionic', 'ionicLazyLoad'])</pre>
将 lazy-scroll作为属性放入 <ion-content>用来监听滚动
<pre><ion-content lazy-scroll></pre>
然后将src改为img-lazy-src
<pre>