javascript - 使用 Knockout 和 jQuery 延迟加载图像

Question

我有一个图像密集型网站，它使用 knockout 构建并包含 jQuery。

这些在 foreach 循环中:

<!-- ko foreach: {data: categories, as: 'categories'} -->
<!-- Category code -->
<!-- ko foreach: {data: visibleStations, as: 'stations'} -->
<!-- specific code -->
<img class="thumb lazy" data-bind="attr: { src: imageTmp,
                                           'data-src': imageThumb,
                                           alt: name,
                                           'data-original-title': name },
                                   css: {'now-playing-art': isPlaying}">
<!-- /ko -->
<!-- /ko -->

所以基本上当我创建这些元素时，imageTmp 是一个返回临时 url 的计算可观察对象，而 imageThumb 被设置为来自 CDN 的真实 url。

我也有这段代码，称之为 Lazy Sweeper:

var lazyInterval = setInterval(function () {
    $('.lazy:in-viewport').each(function () {
        $(this).attr('src', $(this).data('src')).bind('load', function(){
            $(this).removeClass('lazy')
        });
    });
}, 1000);

该代码会查找视口(viewport)中的这些图像(使用自定义选择器仅在屏幕上查找图像)，然后将 src 设置为 data-src.

我们想要的行为是避免加载用户不会看到的数十亿(呃，实际上是几百)的开销。

我们看到的行为是，在第一次加载时，它看起来像在 ko.applyBindings() 以某种方式被调用之后，Lazy Sweeper 被破坏了，我们看到图像恢复为默认图像。然后清扫器重新运行，我们再次看到它们显示。

我们并不清楚如何以更完美的方式最好地实现这一点。

想法？见解？想法？

---

我在推特上得到了一个答案，提到了一个不同的延迟加载库。这并没有解决问题——问题不在于理解 DOM 和 ko 表示需要如何交互以设置延迟加载。我相信我需要的是一种更好的方法来考虑创建一个设置imageTmp的 knockout 模型的问题，并根据它是否在视口(viewport)中响应延迟加载，然后更新一次模型imageThumb(真实图像)已加载。

Answer 1

更新:现在有一个 working example .

我的方法是:

• 让您的模型(站)决定图像 URL 是什么 - 临时的或真实的，就像您已经做的一样
• 有一个绑定(bind)，其工作是处理 DOM - 设置图像源并处理 load事件
• 将懒惰清扫器限制为简单地提供“你现在可见”的信号

View 模型

1. 添加 showPlaceholder包含我们状态的标志:

   this.showPlaceholder = ko.observable(true);
   

2. 添加一个始终返回当前正确图像 url 的计算可观察对象，具体取决于该状态:

   this.imageUrl = ko.computed(function() {
     return this.showPlaceholder() ? this.imageTemp() : this.imageThumb();
   }, this);
   

现在我们要做的就是设置 showPlaceholder每当图像应该加载时为 false。稍后会详细介绍。

绑定(bind)

我们的绑定(bind)工作是设置 <img src>每当计算出 imageUrl变化。如果 src 是真实图像，它应该删除 lazy加载后的类。

  ko.bindingHandlers.lazyImage = {
    update: function(element, valueAccessor, allBindingsAccessor, viewModel, bindingContext) {
      var $element     = $(element),
          // we unwrap our imageUrl to get a subscription to it,
          // so we're called when it changes.
          // Use ko.utils.unwrapObservable for older versions of Knockout
          imageSource  = ko.unwrap(valueAccessor());

      $element.attr('src', imageSource);

      // we don't want to remove the lazy class after the temp image
      // has loaded. Set temp-image-name.png to something that identifies
      // your real placeholder image
      if (imageSource.indexOf('temp-image-name.png') === -1) {
        $element.one('load', function() {
          $(this).removeClass('lazy');
        });
      }
    }
  };

懒惰的清扫工

所有这一切需要做的就是给我们的 View 模型一个提示，它现在应该从占位符切换到真实图像。

ko.dataFor(element)和 ko.contextFor(element) helper functions让我们从外部访问任何与 DOM 元素绑定(bind)的内容:

var lazyInterval = setInterval(function () {
    $('.lazy:in-viewport').each(function () {
      if (ko.dataFor(this)) {
        ko.dataFor(this).showPlaceholder(false);
      }
    });
}, 1000);