🎶 Sym - 一款用 Java 实现的现代化社区(论坛/BBS/社交网络/博客)平台

📕 链滴笔记 - 一款桌面端笔记应用,支持 Windows、Mac 和 Linux

🎸 Solo - B3log 分布式社区的博客端节点,欢迎加入下一代社区网络

♏ Vditor - 一款浏览器端的 Markdown 编辑器

window resize 优化:after resize completed, fire event

场景:

每当 window 发生变化时,需要对其内部的某些元素大小重新设定。

原因:

如果页面本身就非常复杂,在对内部元素大小设定后,可能导致整个页面重新渲染。调用 resize 方法,只要用户不停的改变窗口大小就会对页面进行不停的渲染,最终导致大量消耗 CPU,页面就卡卡卡。

尤其是 IE6,如果 resize 影响到了 window 大小,将会继续 resize,最终导致不停的 resize,然后就崩溃了。

思路:

在用户 resize 完之后再去触发事件。

在 resize 内创建一个 setTimeout,当用户不停的 resize 时,就先清除上一次的 setTimeout,其内部函数就不会被执行,当然这个时间必须设置的比较短。

也就是说每次 resize 被触发的时候,就会清除上一次的 setTimeout,当停止 resize 的时候,最后一个 setTimeout 将无法被清除,当然就顺利执行了。

代码如下:

var timer = 0;
$(window).resize(function () {
    clearTimeout (timer);
    timer = setTimeout(function () {
        console.log("window resize");
	$("#list").table("setHeight", $(window).height() - 100);
    }, 500);
});

 


欢迎注册黑客派社区,开启你的博客之旅。让学习和分享成为一种习惯!

留下你的脚步