bLazy 图像延迟加载无法与 ionic2 结合使用

Question

我目前正在尝试将 bLazy 延迟加载脚本与 angular2 和 ionic2 结合使用。

仅将 javascript 与 HTML 一起使用就像一个魅力和预期的那样：

<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/blazy/1.6.2/blazy.min.js"></script>
</head>
<body>
<script>
    // Example
    var bLazy = new Blazy({
        src: 'blazy-data' // Default is data-src
    });
</script>

<style>
    .b-lazy {
        -webkit-transition: opacity 500ms ease-in-out;
        -moz-transition: opacity 500ms ease-in-out;
        -o-transition: opacity 500ms ease-in-out;
        transition: opacity 500ms ease-in-out;
        max-width: 100%;
        opacity: 0;
    }
    .b-lazy.b-loaded {
        opacity: 1;
    }
    .imgbg {
        background-color:#b0b0b0;
        max-width: 400px;
        padding: 2px;
        border-color: #fff;
        border-style: solid;
    }
</style>

<div class="imgbg"><img class="b-lazy" src="data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw" blazy-data="http://lorempixel.com/400/400/abstract" border="1" width="400" height="400" /></div>
<div class="imgbg"><img class="b-lazy" src="data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw" blazy-data="http://lorempixel.com/400/400/fashion" border="1" width="400" height="400" /></div>
<div class="imgbg"><img class="b-lazy" src="data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw" blazy-data="http://lorempixel.com/400/400/city" border="1" width="400" height="400" /></div>
<div class="imgbg"><img class="b-lazy" src="data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw" blazy-data="http://lorempixel.com/400/400/sports" border="1" width="400" height="400" /></div>
<div class="imgbg"><img class="b-lazy" src="data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw" blazy-data="http://lorempixel.com/400/400/people" border="1" width="400" height="400" /></div>

</body>
</html>

这显示了延迟加载图像的占位符，一旦它们进入视口，就会加载并显示。（与 jsfiddle here 相同的代码）

在 ionic2 应用程序中使用相同的 DIV 时，延迟加载不起作用。请注意，我已经使用了关于将 bLazy 与 angular.

一起使用的文档中提到的机制

它只是在第一次初始化后不加载图像。所以我认为这可能是一个时间问题，但即使使用按钮调用 bLazy 的 revalidate 方法，它也只加载视口内的图像，所有其他图像都被忽略。

请查看此 plunkr 示例：https://plnkr.co/edit/5LoBQ389PQv4AlBTlbjw?p=preview

有人知道这个问题的解决方法或如何正确地将 bLazy 与 ionic2 一起使用吗？

提前致谢。

Answer 1

你这里有两个问题：

1) 如果你不指定容器，bLazy 只监听 window 上的滚动事件 - 在这种情况下你需要它来监听 scroll-content 上的滚动事件。

2) 时间安排有些奇怪。我不是 100% 确定是什么和为什么，但下面的解决方案解决了它。

/* ... */

export class HomePage {

  /* ... */

  ionViewLoaded() {
    this.bLazy = new Blazy({ 
      src: 'blazy-data', // Default is data-src
      container: 'scroll-content'
    });
  }

  ionViewDidEnter() {
    this.bLazy.revalidate();
  }

  constructor(private nav: NavController) {
  }

  /* ... */

}

ionViewLoaded 和 ionViewDidEnter 是 Ionic 2 Lifecycle events。

在我看来，ionViewLoaded 理论上应该足够了，因为它会在页面准备就绪时调用。但由于不知何故它没有，我们只需重新验证 bLazy 成为活动页面。

bLazy 图像延迟加载无法与 ionic2 结合使用

bLazy image lazyloading not working in combination with ionic2

ionic2

blazy

angular