影の域

关注web前端,追逐html5脚步,体会code人生

KISSY DataLazyLoad组件之事件BUG

| 6,615 点击

正在随手弄一Photo App, 为了性能和效率,不得不使用LazyLoad,至此,为此BUG的浮现做好了铺垫。

为图快速制作出原型,暂且使用KISSY辅助开发,App自身只有一个重要需求: 弹性、自适应。

所以,很自然的对 windows 对象做了 Resize Event 的监听处理。 %*……(*&*%%*……*(,(此处省略1000字),coding-complete && unit-test-ok !

然后,准备添加 LazyLoad支持以提高体验和性能,降低成本。(殊不知,杯具就此发生)

)*)*()……&(……&*%&**(此处省略1000字),coding-complete && unit-test-ok !

准备 save && comit, 随着不经意的窗口Scroll 到底部 & Resize ,我hold住了。。。。。

自适应能力貌似费了, &(*()*——(——*)…………*(*(此处省略1W字)

好吧,我知道,一般都是我的问题,遂,加入以下调试代码块辅助检查:

window.addEventListener('resize', function(){ console.info('Native Resize Event fire !!') }, false);

。。。结果出乎意料,冇反应。

直觉告诉,应该是KISSY在跟我开玩笑。

可是,想不通,为什么窗口在冇完全Scroll到底之前(或者说最后一个图片未被LazyLoad加载之前),一切都那么和谐有序呢?

看来,Source 我不得不再一次的偷窥你了。 – -!

(&(*()(——)(——…………*(*&(此处省略1W字)

经过排查,问题不在 KISSY.js 核心文件,so, 问题就极有可能存在与 DataLazyLoad 组件本身鸟。  – -!

终于,我找到了让我撕心裂肺的你,你藏的如此诡异,以至于无心者很难察觉你的存在:

var self = this, resizeHandler,
    // 加载延迟项
    loadItems = function () {
        self._loadItems();
        if (self._getItemsLength() === 0) {
            Event.remove(win, SCROLL, loader);
            Event.remove(win, RESIZE, resizeHandler);
        }
    },
    // 加载函数
    loader = S.buffer(loadItems, DURATION, this);

// scroll 和 resize 时,加载图片
Event.on(win, SCROLL, loader);
Event.on(win, RESIZE, function () { self.threshold = self._getThreshold(); loader(); });

从以上代码块,可以看出悲催的 resizeHandler 变量忘记赋值鸟!!!造成 Event.remove(win, RESIZE, resizeHandler) 的影响扩大到了全局,说白了,就是所有的 resize listener 都被瞬间释放鸟,世界清静了。。。。

既然,code里寻你千百行,我也不能让你就在那变量定义处。

fix 就很明了了:

Event.on(win, RESIZE, resizeHandler = function () { self.threshold = self._getThreshold(); loader(); });

为了直观,提供2个简易DEMO来对比。

原始BUG     修正后

相关推荐