微信公众号定制开发

ionic图片懒加载
<p> <span style="color:#333333;font-family:&quot;font-size:16px;line-height:25.6px;background-color:#FFFFFF;">绑定滚动事件on-scroll</span> </p> <p> <span style="color:#333333;font-family:&quot;font-size:16px;line-height:25.6px;background-color:#FFFFFF;"> </span> </p> <pre class="prettyprint lang-js">&lt;ion-content on-scroll="scroll()"</pre> <pre class="prettyprint lang-js">// 可见区域的高度 var windowHeight = $(window).height(); $scope.scroll = function(){ lazyLoadImage(); } // repeat渲染结束后再lazyload $scope.$on('ngRepeatFinished', function(){ lazyLoadImage(); }) // lazyload的实现 function lazyLoadImage(){ var windowHeight = $(window).height(); imgCache = $('img.lazyload') imgCache.each(function(index, el) { if($(el).offset().top - windowHeight &lt; -100){ var url = $(el).attr('data-url'); $(el).attr('src', url); $(el).removeClass('lazyload'); $(el).addClass('animated fadeIn'); } }); }</pre> end-repeat指令代码<br /> <p> <pre class="prettyprint lang-js">.directive('endRepeat', ['$timeout', function ($timeout) { return { restrict: 'A', link: function (scope, element, attr) { if (scope.$last === true) { $timeout(function () { scope.$emit('ngRepeatFinished'); }); } } } }])</pre> 模板代码 </p> <p> <pre class="prettyprint lang-js">&lt;img data-url="{{produce.produce_image}}" class="lazyload" ng-repeat="produce in produces" end-repeat&gt;</pre> <span style="color:#333333;font-family:&quot;font-size:16px;line-height:25.6px;background-color:#FFFFFF;">原理:将图片的src设置在data-url中,当随着页面滚动,图片进入可视区域时,将src设置为data-url的值</span> </p>

上一篇:ionic的ion-infinite-scroll在加载的时候会请求两次

下一篇:没有更多文章了