我正在建设一个网站,主要使用画布,但唯一涉及的大炮是一条线画水平,这条线大约是13000 is长。
当用户滚动我的窗口,然后水平滚动沿m画布路径,示例。
我已经通知firefox (版本6.0.2),我的文档无法滚动。在我的控制台中,我收到了一些类似于(NS_ERROR_OUT_OF_MEMORY)的内容。
在搜索这个之后,我发现这可能是一个潜在的内存泄漏?这是怎么工作的,是不是因为我写代码的方式?或者这是浏览器/硬件问题?
我重新启动我的功能窗口,调整大小等,我很好奇,这是否可能有任何修改?
// Initate the plugin
$(window).resize(function() {
if(this.resizeTO) clearTimeout(this.resizeTO);
this.resizeTO = setTimeout(function() {
$(this).trigger('resizeEnd');
}, 500);
});
$(window).bind('resizeEnd', function() {
$("#path").scrollPath({drawPath: true, wrapAround: false});
});
$("#path").scrollPath({drawPath: true, wrapAround: false}); $(document).ready(init);
$('.wrapper').css({'top' : '0px','left' : '0px'});
$('.wrapper > div').css({'height' : + $(window).height() +'px'});
function init() {
// Set window height and width variables
var windowheight = $(window).height();
var windowwidth = $(window).width();
// Check monitor size and workot if incentives needs extra space etc
var bff = 4020 + (1993 - windowwidth);
// Move divs into position
$('.culture').css('top', + - windowheight + 'px');
$('.careerpath').css('top', + - windowheight + 'px');
$('.training').css('top', + - windowheight + 'px');
$('.apply').css('top' , + - windowheight + 'px');
/* ========== DRAWING THE PATH AND INITIATING THE PLUGIN ============= */
$.fn.scrollPath("getPath")
// Move to 'start' element
.moveTo(0, 0, {name: "div"})
.lineTo(2400, 0, {name: "div1"})
.lineTo((bff-550), 0, {name: "div2"})
.lineTo(bff, 0, {name: "div3"})
.lineTo(bff, -windowheight, {name: "div4"})
.lineTo((bff + 1993), -windowheight, {name: "div5"})
.lineTo((bff + 1993 + 1837), -windowheight, {name: "div6"})
.lineTo((bff + ((1993 + 1837 + 1795) - 325)), -windowheight, {name: "div7"})
// We're done with the path, let's initate the plugin on our wrapper element
// Window resize function
$(window).resize(function() {
if(this.resizeTO) clearTimeout(this.resizeTO);
this.resizeTO = setTimeout(function() {
$(this).trigger('resizeEnd');
}, 500);
});
$(window).bind('resizeEnd', function() {
$("#path").scrollPath({drawPath: true, wrapAround: false});
});
$("#path").scrollPath({drawPath: true, wrapAround: false});
}发布于 2013-02-20 09:32:53
好吧,现在我在谷歌上搜索你使用的插件,我知道是怎么回事。
http://joelb.me/scrollpath/
“线”实际上是一个形状,而scrollPath正在为它生成一个不错的大画布。问题就在scrollPath的内部。它创建了太多的画布实例或泄漏了一些东西。
您应该更好地跟踪/记录错误,并向作者报告。
从单个DOM元素创建路径的建议是无效的,因为我们知道您不是指一条直线。我不知道你的trget到底是什么,但是你也许可以用impress.js实现它
发布于 2013-02-19 20:03:01
你做错了。这种做法只会带来痛苦。
我不认为你有漏洞,你只是一个程序的内存占优势。除了内存之外,您还会有很大的性能问题。2D画布受到填充率(绘制的像素数)的严重影响。绘制这么多像素会非常慢,即使在快速计算机上也是如此。
所以不要做一个巨大的画布,然后滚动窗口/视图在上面。相反,制作一个小画布,它只呈现一个更大的东西的可见部分。
https://stackoverflow.com/questions/14966119
复制相似问题