周五的时候有个朋友让我写一个关于图片延时加载的教程,
直到今天才有空编辑,这阶段真的是很忙,公众号都变成僵尸号了。
实在是对不起大家。
有人喜欢我的教程,可能我总习惯了用比较简单容易理解的方式去描述这些东西。
别的就不多说了,大家遇到什么问题。
可以直接联系我,不是一句话两句话能讲清楚的问题,我都会抽空写一个教程的。
现在还欠着一个问题没回复:按需加载所有的文件。之前教程里面只写了按需加载controller文件。
这个现在有一个方案,我们公司自己的产品正在使用,正在开发中。效果和性能要等个一两周的测试之后才能知道。
要是方案测试通过了,我就把方案分享给大家。
接着进入今天的主题。
图片延时加载,为什么要延时加载图片呢?
大家都都知道在较长的列表页绘制时会使得应用程序变得卡顿。不仅在界面之内的图片需要绘制,在页面之外的图片也要绘制,如果一次请求的图片数量较少,看不出有什么性能问题,但是当图片较多且较大时,达到一定的量级,那么就会影响程序的性能了。使用延时加载图片,当你滚动到相应的子项时,该子项的图片才开始加载。这样子实现,当前可视区域的图片显示正常,而可视区域之外的图片却不加载,在一定程度上能够加快页面的绘制,对于ionic的应用长列表页应该算是一个比较常见的部件了。所以在ionic项目中使用图片延时加载技术是一个不错的选择。
根据需求分析,我们能够理解,首先延时加载图片就是一开始不加载,而在滚动容器之后,按条件开始加载图片,条件就是该图片在可视区域内。
所以首先我们要给图片所在容器绑定一个滚动事件,当视图滚动时抛出加载图片的事件。
这个demo是我上次不知道写那个教程之后的Demo,懒得新建一个项目,大家关注我截图的这些地方就好了。
这里就是把这个外层承载的容器定义为lazy-scroll,用于在指令里面绑上事件。
事件也很好理解,就是绑定滚动事件,然后抛出一个lazyScrollEvent事件。
接着我们实现按条件加载图片,当图片在现实区域之内。
给对象绑上监听事件
这里有几个地方可以关注的。一个是isInView()条件用来判断对象是否在屏幕可视区域内。一个就是这个监听事件的返回对象被存储为deregistration,然后在处理加载图片之后被重新执行了绑定。其实做过web端通信的应该了解,web是需要保活机制确定事件的活性。然而这里并没有什么作用,当图片加载完成之后,并不需要再次执行加载。但是会有一个问题,可能加载是失败的时候,再次进入视图可以再次加载。
判断是否在屏幕的可视区域之内的方法,有点类似编写游戏时常使用到的碰撞检测。
------------------------------------------略------------------------
额。有工作了。没时间写了,将就看吧。
---------------------------------------略--------------------------------
然后用法很简单,把ng-src替换成image-lazy-src就可以了,记得给他们的承载容器加上lazy-scroll。
我这里是直接把文件放在app.js里面了。大家可以根据自己的文件加载规范把文件分离出来。
app.directive('lazyScroll', ['$rootScope', '$timeout', function($rootScope, $timeout) { return { restrict: 'A', link: function ($scope, $element) { var scrollTimeoutId = 0; $scope.invoke = function () { $rootScope.$broadcast('lazyScrollEvent'); }; $element.bind('scroll', function () { $timeout.cancel(scrollTimeoutId); scrollTimeoutId = $timeout($scope.invoke, 0); }); } }; }])然后是
app.directive('imageLazySrc', ['$document', '$timeout', '$ionicScrollDelegate', '$compile', function ($document, $timeout, $ionicScrollDelegate, $compile) { return { restrict: 'A', scope: { lazyScrollResize: "@lazyScrollResize", imageLazyBackgroundImage: "@imageLazyBackgroundImage" }, link: function ($scope, $element, $attributes) { if (!$attributes.imageLazyDistanceFromBottomToLoad) { $attributes.imageLazyDistanceFromBottomToLoad = 0; } if (!$attributes.imageLazyDistanceFromRightToLoad) { $attributes.imageLazyDistanceFromRightToLoad = 0; } if ($attributes.imageLazyLoader) { var loader = $compile('<div class="image-loader-container"><ion-spinner class="image-loader" icon="' + $attributes.imageLazyLoader + '"></ion-spinner></div>')($scope); $element.after(loader); } var deregistration = $scope.$on('lazyScrollEvent', function () { //console.log('scroll'); if (isInView()) { loadImage(); deregistration(); } } ); function loadImage() { $element.bind("load", function (e) { if ($attributes.imageLazyLoader) { loader.remove(); } if ($scope.lazyScrollResize == "true") { //Call the resize to recalculate the size of the screen $ionicScrollDelegate.resize(); } }); if ($scope.imageLazyBackgroundImage == "true") { var bgImg = new Image(); bgImg.onload = function () { if ($attributes.imageLazyLoader) { loader.remove(); } $element[0].style.backgroundImage = 'url(' + $attributes.imageLazySrc + ')'; // set style attribute on element (it will load image) if ($scope.lazyScrollResize == "true") { //Call the resize to recalculate the size of the screen $ionicScrollDelegate.resize(); } }; bgImg.src = $attributes.imageLazySrc; } else { $element[0].src = $attributes.imageLazySrc; // set src attribute on element (it will load image) } } function isInView() { var clientHeight = $document[0].documentElement.clientHeight; var clientWidth = $document[0].documentElement.clientWidth; var imageRect = $element[0].getBoundingClientRect(); return (imageRect.top >= 0 && imageRect.top <= clientHeight + parseInt($attributes.imageLazyDistanceFromBottomToLoad)) && (imageRect.left >= 0 && imageRect.left <= clientWidth + parseInt($attributes.imageLazyDistanceFromRightToLoad)); } $element.on('$destroy', function () { deregistration(); }); $timeout(function () { if (isInView()) { loadImage(); deregistration(); } }, 500); } }; }]);
还有其他问题的直接小窗问我吧!本来想说的明白点的,这边工作催的紧。。。
项目Demo地址:http://pan.baidu.com/s/1eSM4te6
如果你还有什么其他的问题,可以通过以下方式找到我
新浪微博:小虎Oni
微信公众号:ionic__