DOM呈現中是否存在事件？

我正在使用此JavaScript庫jQuery SVG來操縱HTML頁面中的外部svg。 SVG呈現速度很慢。DOM呈現中是否存在事件？

當svg文件很重時，我看不到第一個動畫，因爲它在渲染之前就開始了。動畫從加載事件開始，但該頁面尚未呈現，所以我看到動畫結束。有沒有辦法在JavaScript中捕捉渲染事件？

// load svg 
$('#slide').svg({}); 
    var svg = $('#slide').svg('get'); 
    svg.load('slide.svg', { 
    addTo: false, 
    changeSize: false, 
    onLoad: onLoad 
}); 
// animation start when dom is ready not when page is render 
function onLoad(){ 
    $('#maskRight').animate({svgWidth: '200'}, 1500) 
}

來源

2013-06-05 mrpazzo

['requestAnimationFrame']（https://developer.mozilla.org/en-US/docs/Web/API/window.requestAnimationFrame） – zzzzBov

@zzzzBov +1，這是一個很大的區別。值得一提的是jQuery已經在內部使用動畫。 –

@BenjaminGruenbaum他們只做了很短的時間（約1.6版） – Prinzhorn

我覺得這裏的問題是，你的JavaScript是在<頭>標籤，這意味着可能的Javascript開始身體負荷運行前加載。我建議以下兩種方法之一：

jQuery的$（文件）。就緒（處理）

http://api.jquery.com/ready/

或者你也許可以還您掛鉤上面的代碼爲做到這一點身體的onLoad事件，像這樣：

<body onload="loadSVG"> 
    <stuff /> 
</body> 
<script> 
    function loadSVG(){ 
    $('#slide').svg({}); 
     var svg = $('#slide').svg('get'); 
     svg.load('slide.svg', { 
     addTo: false, 
     changeSize: false, 
     onLoad: onLoad 
     }); 
    } 
    function onLoad(){ 
    $('#maskRight').animate({svgWidth: '200'}, 1500) 
    } 
</script>

我還沒有測試此代碼，但它的第一件事，我會嘗試，如果我遇到了這個問題，並沒有想用jQuery的ready（）函數一些原因。

希望這會有所幫助！

來源

2013-06-05 17:53:46 JessieArr

我已經把代碼放在jquery ready（）函數:(我的問題是load事件不是sincronyze與渲染事件 – mrpazzo

DOM呈現中是否存在事件？

回答

相關問題