使用Knockout和jQuery的Lazyload图像

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

这些是在foreach循环中:

所以基本上当我创建这些元素时,imageTmp是一个计算的observable,它返回一个临时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);

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

我们想要的行为是避免加载用户看不到的jillion(呃,实际上是几百)的开销.

我们看到的行为是,在第一次加载时,看起来像以后ko.applyBindings()被称为懒惰清扫器被破坏,我们看到图像恢复到默认图像.然后扫地机重新运行,我们看到它们再次显示.

我们不清楚如何以更加淘汰的方式实现这一目标.

思考？见解？想法？

我在twitter上得到了一个答案,提到了一个不同的延迟加载库.这没有解决问题 - 问题是不了解DOM和ko表示如何交互以设置延迟加载.我相信我需要的是一个更好的方法来思考创建一个设置的淘汰模型的问题imageTmp,并根据它是否在视口中响应延迟imageThumb加载,然后加载模型一次(真实图像).