请教一个关于 ionic/cordova (或 AngularJS) 动态的创建 html 实现滚动时懒加载图片的问题
my101du · 2015-09-20 14:44:20 +08:00 · 5207 次点击这是一个创建于 3337 天前的主题，其中的信息可能已经有所发展或是发生改变。
前端 html 页面关键代码：
<ion-content class="padding" lazy-scroll>
<div id="test-div" ng-bind-html="outputHtml"></div>
</ion-content>
该 html 页面绑定的 Controller 通过 ajax 获取数据，返回值是段带有大量图片的 html ，然后用这段返回值(经过一定的处理)更新前端页面的绑定变量“ outputHtml ”，实现动态插入 html 并显示出来(这里因为最新的 AngularJS 不支持非标准的 html 元素属性，使用了 ngSanitize 确保 html 代码完整 )。
$scope.outputHtml = '';
$.ajax ({
……略
success: function (response ) {
……略
$scope.outputHtml = $sce.trustAsHtml (htmlDetail );
$scope.$apply ();
}
});
截止目前这一步，一切正常，能正常把所有图片都展示在 <div id="test-div"> 中。
后来通过监视浏览器的内存占用发现，因为这些图片都是一次性加载出来的，所以内存占用快速增加，并且会偶尔因为网速的问题，加载卡顿。
于是希望能实现“懒加载”。
通过使用这篇文章 SIMPLE DIRECTIVE TO LAZY LOAD IMAGES IN YOUR IONIC APP 说明的方法，对 <img> 标签的 src 属性进行了替换，并创建必须的新属性和值 image-lazy-src。
发现最后展示的 html 代码虽然如预期，但是“懒加载”完全没有生效。不管怎么滚动，这些图片都只显示 src 里的那个“占位图”，不会随着页面滚动而更新路径（使用 image-lazy-src 里的值）。
<div id="test-div" ng-bind-html="outputHtml" class="ng-binding">
<p><img src="img/ionic.png" class="lazy" image-lazy-src="http://test.com/123.jpg"> </p>
<p><img src="img/ionic.png" class="lazy" image-lazy-src="http://test.com/456.jpg"> </p>
<p><img src="img/ionic.png" class="lazy" image-lazy-src="http://test.com/789.jpg"> </p>
<p><img src="img/ionic.png" class="lazy" image-lazy-src="http://test.com/111.jpg"> </p>
<p><img src="img/ionic.png" class="lazy" image-lazy-src="http://test.com/2222.jpg"> </p>
</div>
检查了几次代码，应该没有遗漏， js 调用、 app 声明都没有问题，浏览器也没有任何报错。
后来又查找到文章 AngularJS data bind in ng-bind-html?，说要用这样的方式输出 html ：就是不能让 img 的 src 在 html 代码的创建阶段就生成，而是要放入一个 $scope 变量中，让它能“感知数据更新”（好像是这个意思），于是我试着把图片的 src 全部用一个固定的 $scope.caption 来替换
//测试的路径
$scope.caption = 'http://test.com/xyz.jpg';
//替换原来 html 代码里 img 的 image-lazy-src 属性值
$(el ).attr ('image-lazy-src', "{{caption}}");
其他代码略……
$scope.outputHtml = $interpolate (htmlDetail )($scope );
$scope.outputHtml = $sce.trustAsHtml ($scope.outputHtml );
$scope.$apple ();
这样输出的 html 变成了(路径确实变了)
<div id="test-div" ng-bind-html="outputHtml" class="ng-binding">
<p><img src="img/ionic.png" class="lazy" image-lazy-src="http://test.com/abc.jpg"> </p>
<p><img src="img/ionic.png" class="lazy" image-lazy-src="http://test.com/abc.jpg"> </p>
<p><img src="img/ionic.png" class="lazy" image-lazy-src="http://test.com/abc.jpg"> </p>
<p><img src="img/ionic.png" class="lazy" image-lazy-src="http://test.com/abc.jpg"> </p>
<p><img src="img/ionic.png" class="lazy" image-lazy-src="http://test.com/abc.jpg"> </p>
</div>
但是，还是无法实现滚动页面，图片会动态加载。
那么请问， ionic 下，大家有没有遇到成功的案例可以帮助我解答这个问题呢？ 是否我对 AngularJS 的理解不够，在某些代码的处理时间段有误？
谢谢大家。
——————————
补充一下：
因为每次加载的 html 结构不一样，会有很多其他的 html 标签混杂，还可能有大段的文本，所以无法用 ng-repeat 实现规划出 html 结构，只能每次动态组装 html 代码
第 1 条附言 · 2015-09-21 10:27:12 +08:00
呃，是我描述得不清楚么……没有同学遇到过这样的处理吗？
目前尚无回复
Select Language