V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
V2EX 提问指南
my101du
V2EX  ›  问与答

请教一个关于 ionic/cordova (或 AngularJS) 动态的创建 html 实现滚动时懒加载图片的问题

  •  
  •   my101du · 2015-09-20 14:44:20 +08:00 · 5213 次点击
    这是一个创建于 3352 天前的主题,其中的信息可能已经有所发展或是发生改变。

    前端 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">&nbsp;</p>
    <p><img src="img/ionic.png" class="lazy" image-lazy-src="http://test.com/456.jpg">&nbsp;</p>
    <p><img src="img/ionic.png" class="lazy" image-lazy-src="http://test.com/789.jpg">&nbsp;</p>
    <p><img src="img/ionic.png" class="lazy" image-lazy-src="http://test.com/111.jpg">&nbsp;</p>
    <p><img src="img/ionic.png" class="lazy" image-lazy-src="http://test.com/2222.jpg">&nbsp;</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">&nbsp;</p>
    <p><img src="img/ionic.png" class="lazy" image-lazy-src="http://test.com/abc.jpg">&nbsp;</p>
    <p><img src="img/ionic.png" class="lazy" image-lazy-src="http://test.com/abc.jpg">&nbsp;</p>
    <p><img src="img/ionic.png" class="lazy" image-lazy-src="http://test.com/abc.jpg">&nbsp;</p>
    <p><img src="img/ionic.png" class="lazy" image-lazy-src="http://test.com/abc.jpg">&nbsp;</p>
    </div>
    

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

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

    谢谢大家。

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

    第 1 条附言  ·  2015-09-21 10:27:12 +08:00
    呃,是我描述得不清楚么……没有同学遇到过这样的处理吗?
    目前尚无回复
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   922 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 24ms · UTC 22:13 · PVG 06:13 · LAX 14:13 · JFK 17:13
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.