jQuery 中的.ready() 和window.onload 的区别

我目前的理解，他们之间的区别，其实说白了，就类似与吃饭过程中和吃饭结束。

.ready():是DOM加载过程中，可以重复使用，就相当于是一口一口吃饭，按顺序吃，但数量无限制。

.onload：是页面都加载完了，就只有一次机会，就像吃完饭这个事，一顿饭只有一次。

在调css样式的时候，因为手机平板等移动端的图片高度经常是不固定的，需要根据宽度的百分比来设置图片的动态高度。那么就会遇到一个问题，如果用ready，并且，图片是漂浮的，图片上面还有漂浮的字，这个时候，如果拿不到图片的动态高度，那么字就会叠到一起。这个问题在本地测试的时候一般不明显，但是放到服务器上，稍微卡一下，一旦拿不到图片的动态高度，那样式就会惨不忍睹。

这个时候，就必须用window.onload=function(){}来解决问题，当图片的动态高度都拿到了，再去处理后面的字这些动态样式。

同理，如果能搞明白这个顺序，对图片的懒加载技术，就会有更深刻的理解。关于图片懒加载，我会等用熟悉以后，再来写~

下面是一些案例代码：

<script type="text/javascript">
        //屏幕的高
//         var pmg = $(window).height();
        
//         $('.main').css({"height":pmg});
        //之前用.ready()，出现了很多问题，就算用延迟加载都不行。
//             $(document).ready(function(){
//                  setTimeout(gd,500);
                
//             });
        //还是用window.onload靠谱
            window.onload=function(){
                gd();
            };
            function gd(){
                var tpg = $('#tpp').height();
                
                var rqg = $('.rq').height();
                
                $('.card').css({"height":rqg});
            }
        
            
            
        </script>