window.onload V.S $(document).ready 差異

許久未接觸前端世界，維護一個功能讓我對前端語法更接近....

當XXXX.JS載入執行方法應用到某HTML卻尚未完成，發生錯誤怎麼解

讓HTML渲染完成後，再次執行。


<script type='text/javascript'>

    window.onload = function(){
        alert("页面加载完成====》onload");
    }

    $(window).load(function(){
        alert("jquery===》window load" );
    })

    $(document).ready(function () {
        alert("jquery====》document ready");
    });

    $(function(){
        alert("jquery====》document onload");
    });

    function aaa(){
        alert("静态标签====》onload");
    }
</script>

window.onload V.S    $(document).ready 的差異
在黑暗執行緒文章提到

二者的差別在於$(document).ready(fn)發生在"網頁本身的HTML"載入後就觸發，而$(window).load(fn)則會等到"網頁HTML標籤中引用的圖檔、內嵌物件(如Flash)、IFrame"等拉哩拉雜的東西都載入後才會觸發。

我寫了一段示範程式突顯二者的區別。由於Sky_angmap_4.jpg是一張1.2MB的大型圖檔，實際執行時，可以觀察到 “ready event!” –> 圖檔緩慢顯現 -> "load event!”的過程。(嫌下載時間太短，差別不夠明顯的話，可以試試Sky_angmap_7.jpg，XD)

當有圖片非得載完成才能處理才使用window.onload
是HTML有關的就直接使用 $(document).ready