ioinc页面加载前绑定_请教一个关于 ionic/cordova (或 AngularJS) 动态的创建 html 实现滚动时懒加载图片的问题...

前端 html 页面关键代码：

该 html 页面绑定的 Controller 通过 ajax 获取数据，返回值是段带有大量图片的 html ，然后用这段返回值(经过一定的处理)更新前端页面的绑定变量“ outputHtml ”，实现动态插入 html 并显示出来(这里因为最新的 AngularJS 不支持非标准的 html 元素属性，使用了 ngSanitize 确保 html 代码完整 )。

$scope.outputHtml = '';

$.ajax ({

……略

success: function (response ) {

……略

$scope.outputHtml = $sce.trustAsHtml (htmlDetail );

$scope.$apply ();

}

});

截止目前这一步，一切正常，能正常把所有图片都展示在

中。

后来通过监视浏览器的内存占用发现，因为这些图片都是一次性加载出来的，所以内存占用快速增加，并且会偶尔因为网速的问题，加载卡顿。

于是希望能实现“懒加载”。

通过使用这篇文章 SIMPLE DIRECTIVE TO LAZY LOAD IMAGES IN YOUR IONIC APP 说明的方法，对 标签的 src 属性进行了替换，并创建必须的新属性和值 image-lazy-src。

发现最后展示的 html 代码虽然如预期，但是“懒加载”完全没有生效。不管怎么滚动，这些图片都只显示 src 里的那个“占位图”，不会随着页面滚动而更新路径(使用 image-lazy-src 里的值)。

 

 

 

 

 

检查了几次代码，应该没有遗漏， 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 变成了(路径确实变了)

 

 

 

 

 

但是，还是无法实现滚动页面，图片会动态加载。

那么请问， ionic 下，大家有没有遇到成功的案例可以帮助我解答这个问题呢？ 是否我对 AngularJS 的理解不够，在某些代码的处理时间段有误？

谢谢大家。

——————————

补充一下：

因为每次加载的 html 结构不一样，会有很多其他的 html 标签混杂，还可能有大段的文本，所以无法用 ng-repeat 实现规划出 html 结构，只能每次动态组装 html 代码